162

我是新手，开始学习网络浏览器中的 3D 计算机图形。我对在浏览器中制作 3D 游戏很感兴趣。对于任何学习过 WebGL 和three.js 的人...

  1. 使用three.js需要WebGL知识吗？

  2. 使用 three.js 与 WebGL 相比有什么优势？

4

8 回答 8

226

由于您有远大的抱负，因此您必须花时间学习基础知识。这不是你先学什么的问题——如果你愿意，你可以同时学习它们。（这就是我所做的。）

这意味着您需要了解：

  1. WebGL 概念
  2. 三.js
  3. 基本的数学概念

三.js。Three.js 在抽象出 WebGL 的许多细节方面做得非常出色，所以就个人而言，我建议在您的项目中使用 Three.js。但请记住，Three.js 处于alpha阶段，并且经常更改，因此您必须为此做好准备。大多数人通过学习示例来学习 Three.js。避免使用过时的书籍和教程，并避免链接到旧版本库的网络示例。

WebGL。如果你使用 Three.js，你不需要知道如何在 WebGL 中编程，你只需要了解 WebGL 的概念。这意味着，您只需要能够阅读其他人的 WebGL 代码并理解您阅读的内容。这比从头开始自己编写 WebGL 程序要容易得多。您可以使用网上的任何教程很好地学习 WebGL 概念，例如WebGLFundamentals.org和Learning WebGL上的初学者教程。

数学。同样，您至少需要了解这些概念。三本好书是：

  1. Fletcher Dunn 和 Ian Parberry用于图形和游戏开发的 3D 数学入门

  2. 游戏和交互式应用程序的基本数学： James M. Van Verth 和 Lars M. Bishop的程序员指南

  3. Eric Lengyel的 3D 游戏编程和计算机图形学数学

于 2012-08-15T14:01:35.497 回答
25

有一个非常好的在线课程——交互式 3D 图形，位于https://www.udacity.com/course/cs291 on THREE.js。本课程还包括获得实践经验的作业。它涵盖了 Three.js 和计算机图形学的所有基本概念

于 2013-10-25T07:51:44.377 回答
16

我个人的想法如下：

  • 如果你有足够的时间，你可以同时学习两者，但请注意 WebGL 比 Three.js 低得多。
  • 对于第一个 3d 项目，专家建议使用 Three.js 之类的库，以便习惯这些术语和一般的 3d 模型。
于 2012-08-15T10:25:09.540 回答
12

无论您选择哪个方向，我建议您学习/完善您的线性代数技能。然后继续学习或完善您对MVP 维度（模型视图投影）的理解。Three.JS 可以将大部分内容抽象出来，但我认为在认真对待任何 3D 开发之前理解这些概念是关键。

当我第一次使用 OpenGL 学习 3D 编程时，我写了一篇关于 MVP 的介绍性文章。我意识到，在我能够解释这些转换矩阵是什么以及它们与各种维度/空间的关系之前，我真的根本不知道任何 3D 编程，尽管我可以将对象渲染到屏幕上。

由于您的目标是创建游戏，因此我认为您将从首先学习一些原始 WebGL 中受益匪浅，即使您最终使用 Three.js 之类的框架来帮助您稍后编写代码。

于 2013-02-12T12:19:13.030 回答
11

“WebGL 是 2D API 而不是 3D API”

http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html

本文描述了 WebGL 和 3d 库（如three.js）之间的根本区别。
这让我在 WebGL 或 Three.js 之间做出选择变得不费吹灰之力。

于 2013-06-25T23:09:46.167 回答
7

我以前有 Unity3D 和 Papervision3D 的背景，所以我对如何处理 3D 空间有很好的理解。Three.js 是您开始学习如何处理 WebGL 项目的途径。该 api 非常好，非常强大，如果您来自其他 3D 技术，您将在很短的时间内启动并运行。

我花了很多时间研究 Threejs.org 的示例——它们有很多，而且它们非常擅长让你离开并朝着正确的方向前进。这些文档足够好，尤其是当您将它们与其他 webGL 3D api 进行比较时。

您也可以考虑从他们的应用商店（Window>App store）获取免费版本的 Unity3D 和免费的 collada（我得到它时是免费的）导出器。我发现在 Unity 中设置我的场景并将其导出到 Collada 以与 Three.js 一起使用很容易。

另外，我发布了这个与 Three.js 一起使用的名为 neo ( http://rockonflash.com/webGL/three/neo.js ) 的类。只需将其添加到您的项目中，然后调用 Neo.JackIntoThree()，它就会将方法/属性添加到 Object3D 以在您的项目中使用。在调试场景等时，诸如 DrawAllAxis() 之类的东西是无价的。

尽管如此，Three.js 是一个很好的方法——它足够灵活，可以让您编写自己的着色器/对象等，并且开箱即用的强大功能可以帮助您实现目标。

于 2014-07-18T00:23:08.570 回答
4

我拿起了three.js，但也跳进了GLSL，并用three.js shaderMaterial做了很多实验。一种解决方法——three.js 仍然为您抽象了大部分内容，但它也为您提供了对所有渲染（投影、动画）功能的非常干净、低级别的访问。

这样，您甚至可以按照这个很棒的 open-gl 教程进行学习。您不必设置矩阵、类型化数组，因为三个已经为您设置好了，并在需要时更新它们。虽然着色器，您可以从头开始编写 - 简单的颜色渲染将是两行 GLSL。还有一个用于three.js 的后处理插件，它设置了所有缓冲区、全屏四边形和制作效果所需的东西，但着色器可以非常简单地开始。

由于可编程着色器是现代 3d 图形的精髓，我希望我的回答没有漏掉重点:) 迟早，任何这样做的人都需要至少了解引擎盖下发生的事情，这是野兽的本性。此外，了解均匀空间中的第四维可能也很重要。

这本书非常适合 WebGL。

于 2014-03-27T22:24:15.727 回答
2

两者都学了一点，感觉了解了webgl的基础，觉得webgl的介绍就够了，然后跳进三个js。一旦您了解了 WebGL 的基本概念，这将非常容易。有用的链接：

  1. 我读过的最佳介绍： http ://dev.opera.com/articles/view/an-introduction-to-webgl/
  2. 综合教程： http ://www.johannes-raida.de/tutorials.htm
于 2014-04-03T00:13:40.750 回答