如何学习Three.JS 3D引擎

佐笾已逝

2011/5/11

Three.js

学习ThreeJS

我已经用Three.js做了些小实验，这是一个比较伟大的引擎，你只需要为浏览器的不支持而头疼。你可以用它来创建摄像机(cameras)，对象,(objects), 光照(lights), 材质(materials) 等等。你还可以选择渲染器，Three.js提供了多种渲染方式，如果你想让你的网页支持HTML5你也可以选择使用canvas来渲染，也可以使用WebGL或者SVG来进行渲染。Threejs是开源框架，你如果感兴趣你也可以参与开发。但是现在我只是用这个引擎，也只是把它当作一种小工具。在这里我也给大家演示一下如何学习ThreeJS的基础知识。

   对于ThreeJS的粉丝这是一片很基础的文章，但是对于新手这将很快的使你了解ThreeJS，通常你需要结合大量的实例来分析demo才可以明白。如果你有问题可以直接在mrdoob的论坛上发布， asking questions via GitHub.他会给你做出回答和解决的。如果你有很深奥和着急的问题你也可以发邮件给他们 Mr. doob和AlteredQualia 都会帮组你的。

 

1：基础

  首先我假设你是个有一定基础的3D开发者，并且你可以熟练的掌握和合理的运用javascript语法。如果你没有上述两点那么你需要学习学习，也许你会觉得非常的有趣的。不过javascript确实有点混乱，容易被人头疼。

在我们目前的3D世界当中至少包括以下几点基础的东西，我会给大家一一介绍。

 一： 一个场景

二： 一个渲染器

  三： 一个摄像机

   四： 一个对象或者至少两个材质

 

当然你也可以做很多的东西，很多非常疯狂的东西，只要很有足够的想象力，那么就开始你的3D开发，做出很多很炫的WebGL作品吧。

 

2： 支持

 开发WebGL需要浏览器的大力支持，google的chrome是我在做demo的时候常用的浏览器，个人感觉还是不错的。支持webgl的渲染并且在javascript上速度还是不错的还有一些潜在的javascript引擎。Chrome全部支持canvas，webgl，svg这一块。火狐个人觉得排名第二那么google就肯定第一了，并且是火狐4的版本。火狐的javascript引擎似乎还是比google的chrome慢些，但是在渲染的支持上还是很强的。Opear和Safari也支持webgl，但是他们当前的版本只支持canvas渲染，IE9也只支持canvas渲染，到目前为止还没有听到微软说全面支持webgl的消息，担忧啊。

 

 

3：设置场景（Scene）

这一步我想你肯定已经选好了一个可以渲染WebGL的浏览器了，并且选好了你要使用的渲染方式了canvas，因为canvas还是比较标准些。Canvas不只是支持WebGL，还有更多的支持。不过，WebGL运行在你cpu的图形卡上，这样就意味着你的cpu可以专心的做别的事，而不需要为webgl渲染而担心，这就叫做硬件加速渲染。

 无论你选择什么样的渲染机制，但是你需要记住的就是javascript需要很好的优化性能，因为3D对于浏览器来说还是很大的渲染，所以在你的javascript代码中尽量减少浏览器的压力，优化优化再优化你的javascript代码。

 那么这样的话，你可以下载you have downloadedThreeJS的多有js文件在你的电脑中，那么先看看如何着手建立一个Threejs的场景，看下面代码行：

// set the scene size
var WIDTH = 400,
    HEIGHT = 300;

// 设置相机的属性s
var VIEW_ANGLE = 45,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 0.1,
    FAR = 10000;

// 得到dom的元素
// - 假设我们有jquery的开发经验
var $container = $('#container');

// 创建一个WebGL的渲染器和摄像机和一个场景

var renderer = new THREE.WebGLRenderer();
var camera = new THREE.Camera(  VIEW_ANGLE,
                                ASPECT,