// 创建球体表面的材质
var sphereMaterial =
new THREE.MeshLambertMaterial(
{
color: 0xCC0000
});
值得指出的是，创建材质的时候，除了颜色还有很多其他参数可以指定，比如光滑度和环境贴图。你可以需要检索这个Wiki页面来确认哪些是哪些属性可以设置在材质上，或Three.js引擎提供的任何对象上。
6.光
如果你现在就想渲染场景，你会看到一个红色的圆。虽然我们在球体上覆盖了朗伯面材质，但场景里没有光。所以按照默认设定，Three.js会恢复到满环境光，物体的看上去的颜色就是物体表面的颜色。让我们添加一个简单的点光源：
复制代码 代码如下:
// 创建一个点光源
var pointLight =
new THREE.PointLight(0xFFFFFF);
// 设置点光源的位置
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// 将点光源加入场景
scene.add(pointLight);
7.渲染循环
显然，关于渲染器的一切都设置好了。万事俱备，我们现在只需要：
复制代码 代码如下:
// 画!
renderer.render(scene, camera);
你很可能像多次渲染，而不是只渲染一次，所以如果你要去做一个循环，你应该使用requestAnimationFrame。这是目前最好的，在浏览器中处理动画的方法，虽然还没有得到最全面的支持，但我强烈建议你去看一看Paul Irish的博客。
8.通用的对象属性
如果你花点时间去浏览一遍Three.js的源代码，你会发现很多对象都继承自Object3D。这个基类包含了很多有用的属性，比如位置、旋转和缩放的信息。特别的，我们的球体是一个Mesh对象，而Mesh对象继承自Object3D对象，但是又增加了些自己的属性：geometry和material。为什么要说这些？因为你一定不会只满足于屏幕中一个什么都不做的圆球，而这些（译者注：基类中的）属性允许你操作Mesh对象更底层的细节和各种各样的材质。
复制代码 代码如下:
// sphere是一个mesh对象
sphere.geometry
// sphere包含了一些点和面的信息
sphere.geometry.vertices // 一个数组
sphere.geometry.faces // 另一个数组
// mesh对象继承自object3d对象
sphere.position // 包含x,y,z
sphere.rotation // 同上
sphere.scale // ... 同上
9.讨厌的秘密
我希望这样说你能很快弄明白：就是如果你修改了，比如说，一个mesh对象的顶点属性vertices，你会发现在渲染循环中，什么都没变。为什么？因为Three.js将mesh对象的信息缓存为某种优化结构了。你真正要做的是给Three.js一个标识，告诉它如果什么东西改变了，需要重新计算缓存中的结构：
复制代码 代码如下:
// 设置geometry为动态的，这样才允许改变其中的顶点
sphere.geometry.dynamic = true;
// 告诉Three.js，需要重新计算顶点
sphere.geometry.__dirtyVertices = true;
// 告诉Three.js，需要重新计算顶点
sphere.geometry.__dirtyNormals = true;
还有更多的标识，但我发现这两个是最有用的。你应该仅仅标识那些确实需要实时计算的属性来避免无谓的运算开销。
10.小结
我希望这篇简单的介绍对你有所帮助。没什么能比得上卷起袖子亲手实践了，我强烈建议你这样做。在浏览器里面运行3D程序很有意思，而且使用像Three.js这样一个引擎免去了很多麻烦，让你一开始就能专注于那些真正cool的事情。
我将这篇教程的源码打包了，你可以下载下来作为一份参考。
您可能感兴趣的文章: