blocks|key|217640|text|我个人的想法如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|217641|217642|如果你有足够的时间，你可以同时学习这两种语言，但请注意，WebGL的级别比Three.js低得多。|unordered-list-item|217643|对于第一个3d项目，专家建议使用像Three.js这样的库，以便熟悉这些术语和通用的3d模型。|217644|217645|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|L|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|M|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|N|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|J|$]]

My personal thoughts are the following:

<ul>
<li>If you have plenty time, you could learn both, but note that WebGL is much lower level than Three.js.</li>
<li>For a first 3d project, experts suggest using a library like Three.js in order to get used to the terms and the general 3d model.</li>
</ul>

blocks|key|2864041|text|既然你有远大的抱负，你就必须投入时间来学习基础知识。这不是你先学什么的问题--如果你想的话你可以同时学习它们。(这就是我所做的。)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2864042|这意味着您需要了解：|2864043|concepts|2864044|Three.js|unordered-list-item|2864045|
|2864046|The+|2864047|WebGL+|ordered-list-item|2864048|的基本数学概念|2864049|2864050|+Three.js。+Three.js在抽象WebGL的许多细节方面做得很好，所以就我个人而言，我建议你在项目中使用Three.js。但请记住，Three.js是alpha，并且它经常变化，因此您必须为此做好准备。大多数人通过研究示例来学习Three.js。避免过时的书籍和教程，避免来自网络的链接到图书馆旧版本的示例。|offset|length|style|BOLD|2864051|+WebGL。如果你使用Three.js，你不需要知道如何用WebGL编程，你只需要理解WebGL的概念。这意味着，您只需要能够阅读其他人的WebGL代码，并理解您所阅读的内容。这比期望自己从头开始编写一个WebGL程序要容易得多。您可以使用网上的任何教程来很好地学习WebGL概念，例如WebGLFundamentals.org和Learning+WebGL上的初学者教程。|2864052|再说一遍，你至少需要理解一下的概念。三本好书是：|2864053|2864054|3D+Math+Primer+for+Graphics+and+Game+Development作者:+Fletcher+Dunn和Ian+Parberry|2864055|2864056|詹姆斯·M·范弗思和拉斯·M·毕晓普的|2864057|Essential+Mathematics+for+Games+and+Interactive+Applications:+A+Programmer’s+Guide|2864058|2864059|2864060|Mathematics+for+3D+Game+Programming+and+Computer+Graphics作者:+Eric+Lengyel|2864061|2864062|entityMap|0|LINK|mutability|MUTABLE|url|http://webglfundamentals.org/|1|http://learningwebgl.com/blog/?page_id=1217|2|https://rads.stackoverflow.com/amzn/click/com/1568817231|3|https://rads.stackoverflow.com/amzn/click/com/1482250926|4|https://rads.stackoverflow.com/amzn/click/com/1435458869^0|0|0|0|0|0|0|0|0|0|0|A|0|0|7|40|L|0|4M|E|1|0|E|A|0|0|0|26|0|1C|2|0|0|0|J|0|0|2A|0|2A|3|0|0|0|0|21|0|1L|4|0|0^^$0|@$1|2|3|4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1X|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|H|7|20|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|21|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|22|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|23|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|24|8|@$U|25|V|26|W|X]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|27|8|@$U|28|V|29|W|X]]|9|@$U|2A|V|2B|1|2C]|$U|2D|V|2E|1|2F]]|A|$]]|$1|10|3|11|5|6|7|2G|8|@$U|2H|V|2I|W|X]]|9|@]|A|$]]|$1|12|3|-4|5|6|7|2J|8|@]|9|@]|A|$]]|$1|13|3|14|5|O|7|2K|8|@$U|2L|V|2M|W|X]]|9|@$U|2N|V|2O|1|2P]]|A|$]]|$1|15|3|-4|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|2R|8|@$U|2S|V|2T|W|X]]|9|@]|A|$]]|$1|18|3|19|5|O|7|2U|8|@$U|2V|V|2W|W|X]]|9|@$U|2X|V|2Y|1|2Z]]|A|$]]|$1|1A|3|-4|5|6|7|30|8|@]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|31|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|O|7|32|8|@$U|33|V|34|W|X]]|9|@$U|35|V|36|1|37]]|A|$]]|$1|1E|3|-4|5|6|7|38|8|@]|9|@]|A|$]]|$1|1F|3|-4|5|6|7|39|8|@]|9|@]|A|$]]]|1G|$1H|$5|1I|1J|1K|A|$1L|1M]]|1N|$5|1I|1J|1K|A|$1L|1O]]|1P|$5|1I|1J|1K|A|$1L|1Q]]|1R|$5|1I|1J|1K|A|$1L|1S]]|1T|$5|1I|1J|1K|A|$1L|1U]]]]

Since you have big ambitions, you have to invest the time to learn the fundamentals. It is not a matter of what you learn first -- you can learn them simultaneously if you want to. (That's what I did.)
This means that you need to understand:
<ol>
<li>WebGL concepts</li>
<li>Three.js</li>
<li>The underlying mathematical concepts</li>
</ol>
Three.js. Three.js does an excellent job of abstracting away many of the details of WebGL, so personally, I'd suggest using Three.js for your project. But remember, Three.js is in alpha, and it is changing frequently, so you have to be prepared for that. Most people learn Three.js by studying the examples. Avoid outdated books and tutorials, and avoid examples from the net that link to old versions of the library.
WebGL. If you use Three.js, you don't need to know how to program in WebGL, you just need to understand the WebGL concepts. That means, that you just need to be able to read someone else's WebGL code and understand what you read. That is a lot easier than being expected to write a WebGL program yourself from scratch. You can learn the WebGL concepts sufficiently well using any of the tutorials on the net, such as the beginner's tutorial at <a href="http://webglfundamentals.org" rel="nofollow noreferrer">WebGLFundamentals.org</a> and <a href="http://learningwebgl.com/blog/?page_id=1217" rel="nofollow noreferrer">Learning WebGL</a>.
Math. Again, you at least need to understand the concepts. Three good books are:
<ol>
<li><a href="https://rads.stackoverflow.com/amzn/click/com/1568817231" rel="nofollow noreferrer" rel="nofollow noreferrer">3D Math Primer for Graphics and Game Development</a> by Fletcher Dunn and Ian Parberry
</li>
<li><a href="https://rads.stackoverflow.com/amzn/click/com/1482250926" rel="nofollow noreferrer" rel="nofollow noreferrer">Essential Mathematics for Games and Interactive Applications: A Programmer’s Guide</a> by James M. Van Verth and Lars M. Bishop
</li>
<li><a href="https://rads.stackoverflow.com/amzn/click/com/1435458869" rel="nofollow noreferrer" rel="nofollow noreferrer">Mathematics for 3D Game Programming and Computer Graphics</a> by Eric Lengyel
</li>
</ol>

blocks|key|217687|text|无论您选择哪个方向，我都建议您在线性代数技能上学习/提高。然后继续学习或完善您对最大值尺寸(模型、视图、投影)的理解。Three.JS可以将这些抽象出来，但我认为在认真对待任何3D开发之前，理解这些概念是关键。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|217688|当我第一次用OpenGL学习3D编程时，我写了一个introductory+article+about+MVP。我意识到，在我能够解释这些转换矩阵是什么，以及它们如何与各种维度/空间相关之前，我真的不知道任何3D编程，尽管我可以将对象渲染到屏幕上。|217689|既然您的目标是创建游戏，那么即使您最终使用像Three.js这样的框架来帮助您编写代码，我认为您也会从先学习一些原始的WebGL中获益良多。|217690|entityMap|0|LINK|mutability|MUTABLE|url|http://rodrigo-silveira.com/3d-programming-transformation-matrix-tutorial/^0|G|6|14|F|0|P|U|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

Whichever direction you choose to go, I suggest you learn/polish up on your linear algebra skills. Then go ahead and learn or polish up your understanding about MVP dimensions (Model View Projection). Three.JS can abstract much of that away, but I think it's key that one understands those concepts well before getting serious about any 3D development.

I wrote an <a href="http://rodrigo-silveira.com/3d-programming-transformation-matrix-tutorial/" rel="noreferrer">introductory article about MVP</a> when I was first learning 3D programming with OpenGL. I realized that until I was able to explain what those transformation matrices are, and how they relate to the various dimensions/spaces, I really didn't know any 3D programming at all, though I could render objects to the screen.

Since your goal is to create games, I think you'll benefit much from learning some raw WebGL first, even if you end up using a framework like Three.js to help you write your code later.

blocks|key|2864082|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2864083|+"WebGL是2DAPI而不是3DAPI“|blockquote|2864084|2864085|2864086|http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html|offset|length|2864087|本文描述了像three.js这样的WebGL和3d库之间的基本区别。|2864088|这让我在WebGL和Three.js之间的选择变得轻而易举。|2864089|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|1Y|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|U|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|V|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|W|7|@]|8|@]|9|$]]|$1|E|3|-4|4|5|6|X|7|@]|8|@]|9|$]]|$1|F|3|G|4|5|6|Y|7|@]|8|@$H|Z|I|10|1|11]]|9|$]]|$1|J|3|K|4|5|6|12|7|@]|8|@]|9|$]]|$1|L|3|M|4|5|6|13|7|@]|8|@]|9|$]]|$1|N|3|-4|4|5|6|14|7|@]|8|@]|9|$]]]|O|$P|$4|Q|R|S|9|$T|G]]]]

<blockquote>
 "WebGL is a 2D API and not a 3D API"
</blockquote>

<a href="http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html" rel="noreferrer">http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html</a>

This article describes the fundamental differences between WebGL &amp; 3d libraries like three.js. 
Which made my choice between WebGL or Three.js a no-brainer.

blocks|key|219500|text|在THREE.js的上有一个非常好的在线课程-交互式3D图形。本课程还包括获得实践经验的作业。它涵盖了Three.js和计算机图形学的所有基本概念|type|unstyled|depth|inlineStyleRanges|entityRanges|data|219501|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

There is a very good online course - Interactive 3D Graphics at <a href="https://www.udacity.com/course/cs291" rel="noreferrer">https://www.udacity.com/course/cs291</a> on THREE.js. This course includes assignments also to get hands-on experience. 
It covers all the basic concepts of Three.js and Computer Graphics

blocks|key|219503|text|我选择了three.js，但也跳到了GLSL，并对three.js+shaderMaterial进行了大量的实验。一种方法是-+three.js仍然为你抽象了很多东西，但它也给了你一个非常干净的，低级的访问所有渲染(投影，动画)的能力。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|219504|这样，你甚至可以跟踪像this+awesome+open-gl+tutorial这样的东西。您不必设置矩阵和类型化数组，因为三个数组已经为您设置好了，并在需要时进行更新。着色器，你可以从头开始写-一个简单的颜色渲染将是两行GLSL。还有一个three.js的后期处理插件，可以设置所有的缓冲区，全屏四元组和你需要做的效果，但着色器可以非常简单的开始。|offset|length|219505|由于可编程着色器是现代3d图形的本质，我希望我的答案不会漏掉要点:)迟早，做这件事的人至少需要了解引擎盖下发生了什么，这是野兽的本质。此外，理解均匀空间中的第四维可能也很重要。|219506|This+book+is+good+for+WebGL.|219507|entityMap|0|LINK|mutability|MUTABLE|url|http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/|1|https://rads.stackoverflow.com/amzn/click/com/0321902920^0|0|B|T|0|0|0|0|S|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

I picked up three.js, but also jumped into GLSL and experimented a lot with three.js shaderMaterial. One way of going about it - three.js still abstracts much of the stuff for you, but it also gives you a very clean, low level access to all the rendering (projection, animation) capabilities. 

This way, you can follow even something like <a href="http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/" rel="nofollow noreferrer">this awesome open-gl tutorial</a>. You don't have to set up the matrices, typed arrays, because three already sets it up for you, updating them when needed. The shader though, you can write from scratch - a simple color rendering would be two lines of GLSL. There is also a post processing plug-in for three.js that sets up all the buffers, full screen quads and stuff you need to do the effects, but the shader can be very simple to begin with. 

Since programmable shaders are the essence of modern 3d graphics, i hope my answer is not missing the point :) Sooner or later, anyone who does this needs to at least understand what goes on under the hood, it's the nature of the beast. Also, understanding the 4th dimension in homogeneous space is probably important as well.

<a href="https://rads.stackoverflow.com/amzn/click/com/0321902920" rel="nofollow noreferrer" rel="nofollow noreferrer">This book is good for WebGL.</a>

blocks|key|3077409|text|我只学了一点，我觉得了解webgl的基础知识，我认为关于webgl的介绍就足够了，然后跳到三个js。一旦您理解了WebGL的基本概念，它就会变得非常简单。有用的链接：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3077410|我读过的最好的教程：http://dev.opera.com/articles/view/an-introduction-to-webgl/|offset|length|3077411|Comprehensive+tutorials：http://www.johannes-raida.de/tutorials.htm|unordered-list-item|3077412|3077413|entityMap|0|LINK|mutability|MUTABLE|url|http://dev.opera.com/articles/view/an-introduction-to-webgl/|1|http://www.johannes-raida.de/tutorials.htm^0|0|A|1O|0|0|O|16|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|I|3|-4|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

I just learnt a little of both and I feel that understand the basics of webgl, I think an introduction on webgl is sufficient and then jump into three js. It will be pretty easy once you understand the underlying concepts of WebGL.
Useful links:

<ol>
<li>Best Intro I have read:
<a href="http://dev.opera.com/articles/view/an-introduction-to-webgl/" rel="nofollow">http://dev.opera.com/articles/view/an-introduction-to-webgl/</a></li>
<li>Comprehensive tutorials:
<a href="http://www.johannes-raida.de/tutorials.htm" rel="nofollow">http://www.johannes-raida.de/tutorials.htm</a></li>
</ol>

blocks|key|3077438|text|我有Unity3D背景，也有Papervision3D背景，所以我对如何处理3D空间有很好的理解。对于学习如何处理WebGL项目的人来说，Three.js是个不错的选择。api非常好，它非常强大，如果你来自另一种3D技术，你将在很短的时间内启动并运行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3077439|我花了很多时间在Threejs.org的例子上--有很多这样的例子，他们非常擅长让你离开并朝着正确的方向运行。这些文档是足够好的，特别是当你将它们与其他webGL+3D应用编程接口进行比较的时候。|3077440|你也可以考虑从他们的应用程序商店(Window>App商店)获得免费版本的Unity3D和免费的collada+(当我得到它时是免费的)+exporter。我发现在Unity中设置我的场景并将其导出到Collada以便与Three.js一起使用非常容易。|3077441|此外，我还发布了一个名为neo+(+http://rockonflash.com/webGL/three/neo.js+)的类，用于Three.js。只需将其添加到您的项目中，然后调用Neo.JackIntoThree()，它就会将方法/属性添加到Object3D中，以便在您的项目中使用。像DrawAllAxis()这样的东西在调试场景等方面是非常有价值的。|offset|length|3077442|不过，毫无疑问，Three.js是一种很好的方式--它足够灵活，可以让你编写自己的着色器/对象等，并且功能强大，可以帮助你实现目标。|3077443|entityMap|0|LINK|mutability|MUTABLE|url|http://rockonflash.com/webGL/three/neo.js^0|0|0|0|I|15|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$H|X|I|Y|1|Z]]|A|$]]|$1|J|3|K|5|6|7|10|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

I came from a Unity3D background as well as Papervision3D back in the day, so I had a good understanding of how to deal with 3D space. Three.js is the way to go for your initial jump into learning how to deal with WebGL projects. The api is very good, it's very powerful and if you're coming from another 3D technology, you'll be up and running with very little time.

I spent a lot of time with Threejs.org's examples - there's a ton of them and they're very good at getting you off and running in the right direction. The docs are decent enough, especially if you're comparing them to other webGL 3D api's out there. 

You might also consider getting the free version of Unity3D and the free collada (was free when I got it) exporter from their app store (Window>App store). I found it easy enough to setup my scene in Unity and export it to Collada for use with Three.js. 

Also, I posted this class that I use with Three.js called neo ( <a href="http://rockonflash.com/webGL/three/neo.js" rel="noreferrer">http://rockonflash.com/webGL/three/neo.js</a> ). Just add it to your project, then call Neo.JackIntoThree() and it will add the methods/properties to Object3D for use in your project. Things like DrawAllAxis() are invaluable when debugging your scene etc.

Hands down though, Three.js is a great way to go - it's flexible enough to let you write your own shaders/objects etc, and powerful enough right out of the box to help you accomplish your goals.

I'm new and starting to learn about 3D computer graphics in web browsers. I'm interested in making 3D games in a browser. For anyone who has learned both WebGL and three.js...

<ol>
<li>Is knowledge of WebGL required to use three.js?</li>
<li>What are the advantages of using three.js vs. WebGL? </li>
</ol>

Learning WebGL and three.js

我是个新手，开始学习web浏览器中的3D计算机图形。我对在浏览器中制作3D游戏很感兴趣。对于任何同时学习过WebGL和three.js的人来说...是使用three.js所需的WebGL知识？与WebGL相比，使用three.js的优势是什么？

问学习WebGL和three.js
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问学习WebGL和three.jsEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问学习WebGL和three.js
EN