我是新手，开始学习在Web浏览器中使用三维计算机图形。我对在浏览器中制作3D游戏感兴趣。对于那些已经学过WebGL和three.js的人来说...
在使用three.js时是否需要了解WebGL？
使用three.js相比WebGL有哪些优势？
学习WebGL和three.js
163
- r1nzler
8
11使用Three.js，没有别的选择。正如West所说，从零开始编写WebGL虽然在理论上很简单，但却很痛苦。几乎每个WebGL应用程序都需要/想要做许多事情。这些事情可以被抽象化隐藏起来。此外，Three.js已成熟为一个令人惊叹的库。如果你查看Google趋势或这里的SO问题数量，你会发现它已经远远领先于竞争对手。 - theblang
4@GeorgeStocker，实际上，这个问题的答案主要是基于事实、参考和具体专业知识的，而不是意见。这是对there.js社区非常有价值的帖子，问题的第二部分肯定是可以接受的。您会如何建议重新措辞，使其对您可接受——也就是说，不改变问题的意思或意图？ - WestLangley
3@GeorgeStocker您的回复本身就是一种观点，而我强烈不同意它。您会建议如何重新措辞该帖子以使其对您可接受？ @GeorgeStocker您的答复本身就是一种观点，我强烈不同意。您有什么建议可以改写这篇文章，使其符合您的要求？ - WestLangley
@GeorgeStocker，你单方面关闭了它。我在问你。作为版主，你有责任回答我的问题。然后我会遵循你的建议并进行你建议的更改。 - WestLangley
1也许问题可以重新表述为询问学习WebGL对于使用Three.js有何好处。该答案将会被事实、参考文献和专业知识所支持。 - zz85
显示剩余3条评论
8个回答
230
由于您有远大的抱负，所以必须投入时间学习基础知识。重要的不是你首先学习什么 - 如果您想同时学习它们，那也可以。（那就是我做的。）
这意味着您需要了解：
- WebGL概念
- Three.js
- 底层数学概念
Three.js. Three.js在抽象化许多WebGL的细节方面做得非常出色，因此个人建议您在项目中使用Three.js。但请记住，Three.js处于测试版，经常发生变化，因此您必须做好准备。大多数人通过研究实例来学习Three.js。避免使用过时的书籍和教程，并避免使用链接到旧版本库的网络示例。
WebGL. 如果您使用Three.js，则不需要知道如何编写WebGL程序，只需要了解WebGL的概念。这意味着您只需要能够阅读他人的WebGL代码并理解您所阅读的内容。这比要求您自己从头开始编写WebGL程序要容易得多。您可以使用网络上的任何教程（例如 WebGLFundamentals.org 和 Learning WebGL）来学习足够了解WebGL概念。
数学. 同样，您至少需要了解相关概念。三本不错的书籍是：
《图形和游戏开发的3D数学入门》（作者：Fletcher Dunn和Ian Parberry）
《游戏与交互应用的基本数学：程序员指南》 作者：詹姆斯·范弗思（James M. Van Verth）和拉尔斯·毕晓普（Lars M. Bishop）
《三维游戏编程和计算机图形学中的数学》 作者：埃里克·伦格尔（Eric Lengyel）
- WestLangley
2
哪个网站是最好的，可以从头到尾以易懂的英语学习WebGL概念。或者至少当作者使用某个“词语”时，在描述一次后再使用它，以便更好地理解。 - Muhammad Umer
1请在帖子正文中查看学习WebGL教程的链接。 - WestLangley
25
有一门非常好的在线课程 - Interactive 3D Graphics，位于 https://www.udacity.com/course/cs291 上，它涵盖了THREE.js的所有基本概念和计算机图形学，同时还包含实践性作业以增加实战经验。
- Bhupendra
16
我个人的想法如下：
- 如果你有足够的时间，你可以学习两者，但请注意 WebGL 比 Three.js 更加底层。
- 对于第一个3D项目，专家建议使用像 Three.js 这样的库来逐渐熟悉术语和3D模型的基本概念。
- Dan D.
1
3我同意这个观点。目前看来，将两者都掌握起来可能是一个不错的选择。我建议从学习Three.JS开始，然后使用GLSL编写一些着色器，并不断尝试学习更多有关WebGL的知识。 - Cory Gross
12
无论你选择哪个方向，我建议你学习/提高你的线性代数技能。然后，继续学习或加强对MVP维度（模型视图投影）的理解。Three.JS可以抽象出许多内容，但我认为在严肃考虑任何3D开发之前，了解这些概念非常重要。
当我第一次用OpenGL学习3D编程时，我写了一篇关于MVP的入门文章。我意识到，在我能够解释这些转换矩阵是什么，以及它们如何与各种维度/空间相关联之前，我真的不知道任何关于3D编程的东西，尽管我能够将对象渲染到屏幕上。
由于你的目标是创建游戏，我认为你会从先学习一些原始的WebGL中受益，即使最终你使用像Three.js这样的框架来帮助你编写代码。
当我第一次用OpenGL学习3D编程时，我写了一篇关于MVP的入门文章。我意识到，在我能够解释这些转换矩阵是什么，以及它们如何与各种维度/空间相关联之前，我真的不知道任何关于3D编程的东西，尽管我能够将对象渲染到屏幕上。
由于你的目标是创建游戏，我认为你会从先学习一些原始的WebGL中受益，即使最终你使用像Three.js这样的框架来帮助你编写代码。
- rodrigo-silveira
2
死链接，你能修复一下吗？我对阅读那篇文章很感兴趣。 - cyfrost
1谢天谢地有archive.org。在这里：https://web.archive.org/web/20171010042037/http://rodrigo-silveira.com/3d-programming-transformation-matrix-tutorial - rodrigo-silveira
11
"WebGL是一个2D API而不是3D API"
http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html
本文介绍了WebGL和three.js等3D库之间的根本区别。这使得我在WebGL和Three.js之间做出选择变得轻而易举。- Bob Fanger
1
1这句话不是来自链接页面的主要文本。尽管如此，我部分地接受链接页面中提出的论点。它并不是关于成为2D API，而是关于成为光栅化API（适用于2D和3D图形）。 - Elias Hasle
7
我也有Unity3D和Papervision3D的背景，所以我对处理3D空间有很好的理解。Three.js是学习如何处理WebGL项目的最佳选择。该API非常好用，功能强大，如果您来自其他3D技术，您将很快上手。
我花了很多时间在Threejs.org的示例上 - 有很多示例，它们非常适合让您朝着正确的方向开始。文档足够好，特别是与其他WebGL 3D API相比。
您还可以考虑获取Unity3D的免费版本以及其应用商店（Window> App Store）中的免费Collada导出器（我获得时是免费的）。我发现在Unity中设置场景并将其导出到Collada以供在Three.js中使用很容易。
此外，我发布了一个名为neo的Three.js类（http://rockonflash.com/webGL/three/neo.js）。只需将其添加到您的项目中，然后调用Neo.JackIntoThree()，它将添加方法/属性到Object3D以供在您的项目中使用。像DrawAllAxis()这样的东西在调试场景时非常有价值等。
毫无疑问，Three.js是一个绝佳的选择 - 它足够灵活，可以让您编写自己的着色器/对象等，同时又足够强大，可以帮助您实现目标。
我花了很多时间在Threejs.org的示例上 - 有很多示例，它们非常适合让您朝着正确的方向开始。文档足够好，特别是与其他WebGL 3D API相比。
您还可以考虑获取Unity3D的免费版本以及其应用商店（Window> App Store）中的免费Collada导出器（我获得时是免费的）。我发现在Unity中设置场景并将其导出到Collada以供在Three.js中使用很容易。
此外，我发布了一个名为neo的Three.js类（http://rockonflash.com/webGL/three/neo.js）。只需将其添加到您的项目中，然后调用Neo.JackIntoThree()，它将添加方法/属性到Object3D以供在您的项目中使用。像DrawAllAxis()这样的东西在调试场景时非常有价值等。
毫无疑问，Three.js是一个绝佳的选择 - 它足够灵活，可以让您编写自己的着色器/对象等，同时又足够强大，可以帮助您实现目标。
- neoRiley
4
我学习了three.js，同时也尝试了GLSL，并且进行了很多three.js shaderMaterial的实验。一种方法是使用three.js，它为您抽象了大部分内容，但它还为您提供了非常干净、低级别的访问所有渲染（投影、动画）功能的方式。
这样，您甚至可以跟随this awesome open-gl tutorial这样的教程。你不必设置矩阵和类型数组，因为three已经为你设置好了，在需要时更新它们。然而，着色器可以从头开始编写——简单的颜色渲染只需要两行GLSL代码。对于three.js还有一个后处理插件，它设置了所有的缓冲区、全屏四边形等等效果所需的东西，但着色器可以非常简单。
由于可编程着色器是现代3D图形的本质，我希望我的回答没有偏离主题:) 迟早有一天，任何从事这个领域的人都需要至少理解发生了什么，这是这个领域的本质。此外，理解同次空间中的第四维可能也很重要。
这样，您甚至可以跟随this awesome open-gl tutorial这样的教程。你不必设置矩阵和类型数组，因为three已经为你设置好了，在需要时更新它们。然而，着色器可以从头开始编写——简单的颜色渲染只需要两行GLSL代码。对于three.js还有一个后处理插件，它设置了所有的缓冲区、全屏四边形等等效果所需的东西，但着色器可以非常简单。
由于可编程着色器是现代3D图形的本质，我希望我的回答没有偏离主题:) 迟早有一天，任何从事这个领域的人都需要至少理解发生了什么，这是这个领域的本质。此外，理解同次空间中的第四维可能也很重要。
- pailhead
2
我刚刚学了一点WebGL和Three.js，我认为理解WebGL的基础知识就足够了，然后就可以进入Three.js了。一旦你理解了WebGL的基本概念，这将非常容易。
有用的链接：
1. 最好的介绍：
http://dev.opera.com/articles/view/an-introduction-to-webgl/
2. 全面的教程：
http://www.johannes-raida.de/tutorials.htm
- Raj
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接