Three js入门教程

来源：互联网发布：淘宝如何设置免运费编辑：程序博客网时间：2024/04/28 03:39

Three.js在处理浏览器3D效果方面表现优异。通过Three js，你可以创建镜头（Cameras），物体（objects），光线（lights），材质（materials）等等，你还可以选择渲染器：可以使用HTML5的Canvas来绘制场景，也可选择使用WebGL或是SVG来渲染。

在3D世界中，我们会涉及到下面这些概念，这些概念会伴随整个创作流程：

场景
渲染器
镜头
物体（带材质的）

兼容性

对于浏览器的支持情况，在对引擎的支持及其JavaScript引擎的速度方面，Google的Chrome浏览器做的最好。Chrome支持Canvas，WebGL以及SVG，且速度极快。Firefox的表现位居第二，其JavaScript引擎速度要比Chrome稍许慢些，但是对渲软器的支持依旧不错，而且新版本JavaScript引擎速度越来越快。Opera还正在增加对WebGL的支持，而Mac上的Safari浏览器提供了启用WebGL的选项。因此，基本上Opera和Safar只支持Canvas渲软，了解这点很重要。

设置场景

Canvas得到的支持程度要好于WebGL，这里值得一提的是，WebGL是调用的显卡的GPU，这样CPU的话就主要负责其他非渲染类的任务，像物理引擎或用户交互方面的任务。

如何设置场景（scene）呢？见下面例子

// 设置场景大小 var WIDTH = 400,   HEIGHT = 300; // 设置镜头属性 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.PerspectiveCamera(     VIEW_ANGLE,     ASPECT,     NEAR,     FAR); var scene = new THREE.Scene(); // 在场景中添加镜头 scene.add(camera); // 镜头起始位置0，0，0，因此将镜头回拉 camera.position.z = 300; // 开始渲染 renderer.setSize(WIDTH, HEIGHT); //增添渲染器提供的DOM元素 $container.append(renderer.domElement);

创建网格曲面

现在创建好一个场景，一个镜头以及一个渲染器（在上述示例中，我选用WebGL做渲染），但是我们还尚未绘制任何内容。Three js实际上还支持部分不同标准的文件类型。如果你有模型需要从Blender，Maya或是Cinema4D导入的，这点特性就显得非常不错。为了简单起见，我讲讲基本物体（primitive）。基本物体是几何网格曲面，或是像球体，平面，立方体和圆柱体这类相对简单的物体。Three js可以让你轻松地创建上述类型的基本物体。

//设置球体变量 var radius = 50,     segments = 16,     rings = 16; // 使用球体几何创建新的网格曲面，接下来我会覆盖上球体材质。 var sphere = new THREE.Mesh(   new THREE.SphereGeometry(     radius,     segments,     rings),   sphereMaterial); // 在场景中添加球体。 scene.add(sphere);

嗯，一切完好，但是球体的材质如何添加呢？在代码中，我们使用了球体材质的变量（sphereMaterial），但是尚未定义，接下来，我们需要更详细的了解下材质方面的内容。

材质

毋庸置疑，这部分内容是Three js最有用的部分。它提供了不少常见（而且非常方便）的材质可覆盖于网格曲面上

"基本"材质 ——在无光情况下进行渲染
Lambert材质
Phong材质

除此之外还有其他材质，但是为简单起见，读者可自行摸索。在WebGL中，这些材质可是救命的功能。为什么呢？因为在WebGL中，你必须得为所有需要渲染的东西编写着色器（Shader），而着色器本身就是一个庞杂的话题，简单说来，着色器使用GLSL（OpenGL Shader Language）写成。它告诉GPU如何渲染物体的外观。这意味着你需要对光线，反射等等进行模拟。其内容会变得极为复杂。幸亏有了Three js，你不用处理这部分内容。但如果你想自己编写着色器的话，那么你也可以用MeshShaderMaterial来实现，因此它的设置相对灵活。

接下来，我们可对球体运用lambert材质

// 创建球体的材质 var sphereMaterial =new THREE.MeshLambertMaterial({       color: 0xCC0000     });

这里值得一提是，除了颜色，你在创建材质时还可以指定其他属性，比如，顺滑度或环境贴图。对于引擎提供的其他物体以及材质的可设置属性选项，你可以访问这个维基页面查看。

光线

如果你现在就开始渲染场景的话，你只会看到一个红色的圆。虽然我们已经添加了Lambert材质，但是场景中默认是没有光源的。Three js就会归位为全环境光，其等同于表面颜色。我们可以指定一点光源来解决这个问题。

// 创建点光源 var pointLight =new THREE.PointLight(0xFFFFFF); // 设置光源位置 pointLight.position.x = 10; pointLight.position.y = 50; pointLight.position.z = 130; // 添加至场景 scene.add(pointLight);

渲染循环

所有渲染所需东西已经准备就绪。但实际上我们还需要继续做下面这项工作：

//绘图 renderer.render(scene, camera);

你渲染的次数可能不止一次，所以你需循环渲染，你最好使用requestAnimationFrame来做。它会非常智能的处理浏览器中的动画问题。但是目前还尚未得到完全支持，因此强烈推荐你了解下Paul Irish这篇内容。

一般物体的属性

如果你有时间阅读Three js的代码，你会发现许多物体继承自Object3D。这一以及基本的对象，包含一些非常有用的属性，比如位置，旋度，缩放比例等信息。我们的球体就是一个继承自Object3D的网格曲面，不过它增添了自身特有的一些属性：几何及材质。为什么我要提这些呢?你不可能只想在屏幕上显示一个啥都不能干的球体。这些属性非常值得研究，因为它可以让你随时操控网格曲面的细节之处。

// 球形几何体 sphere.geometry // 包含的顶点及面。 sphere.geometry.vertices // 一个数组 sphere.geometry.faces // 也是一个数组 // 位置 sphere.position // 包含X，Y，Z sphere.rotation // 同上 sphere.scale // 同上

小提示

使用Three js时，有一点需要了解：如果你修改网格曲面的顶点时，你注意到在循环渲染中，并没有发生任何变化。为什么？原因就是Three js为了优化性能起见，对网格曲面的数据进行了缓存。这时你需要告诉three js，内容已经发生改动，以便three js重新进行计算。如下：

// 将几何体设置为动态，允许更新 sphere.geometry.dynamic = true; // 对顶点的改动 sphere.geometry.__dirtyVertices = true; // 对法线（normals）的改动 sphere.geometry.__dirtyNormals = true;