Threejs 简介

Threejs Demo

以下 Demo 均要求浏览器支持 WebGL

WebGL

WebGL 是一种 3D 绘图标准，允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，在浏览器里展示 3D 场景和模型，免去了开发网页专用渲染插件的麻烦，同时还能为 canvas 提供硬件 3D 加速渲染

OpenGL

OpenGL 定义了一个跨编程语言、跨平台的编程接口规格的专业的图形程序接口，是一个功能强大，调用方便的底层图形库

虽然 DirectX 在家用市场全面领先，但在专业高端绘图领域，OpenGL 是不能被取代的主角

ThreeJS

虽然大部分浏览器实现了 WebGL 标准的编程接口，但是直接使用 WebGL 来构建三维应用需要了解很多内部细节，Threejs 库提供了一套基于 WebGL 封装的非常易用的 API，让我们可以更快速、简介的创建漂亮的三维图形

在这篇 Threejs 简介中，我们先忽略具体构建 Threejs 的整体工程，主要了解使用 Threejs 构建三维应用需要用到的要素

在技术细节上，我们只需要知道，三维应用是基于 canvas 画布元素来展现出来的即可；

场景、相机、渲染器

场景、相机、渲染器是任何一个 threejs 必要的构造元素

场景（开天辟地）

var scene = new THREE.Scene();

如何理解场景，盘古开天辟地就是创建了一个场景，我们不可能在一个奇点里创造三维的物体，这是符合我们的日常经验的，场景是我们放置所有创建或者引入的三维对象的容器，在这个场景中，可以添加一把椅子，可以放一个桌子，只要是能够设计构建出的物体对象，都可以 add 到场景中去

var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

cube.position.x = 0;

cube.position.y = 0;

cube.position.z = 0;

scene.add(cube);

刚刚向场景中添加了一个立方体，但我们只知道这个场景中有一个立方体而已，还需要一种手段去感测到这个立方体

相机（上帝视角）

相机是我们延伸到 Threejs 场景中的眼睛，帮助我们看到内存中虚拟的空间和物体，称之为上帝视角并不为过，因为我们可以以任何角度、距离、模式去观察刚刚创建的空间

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.x = 10;

camera .position.y = 10;

camera.position.z = 10;

camera.lookAt(scene.position);

渲染器（洗照片）

相机虽然替我们看到了，但我们还是啥也没看到，浏览器画布中什么都没有，拍了照片当然还需要冲洗出来，渲染器就是实现了冲洗的功能，将照片展示在 canvas 画布中；

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

$("#webGlOutput").append(renderer.domElement);

renderer.render(scene, camera);

好吧，虽然浏览器中出现了我们创建的立方体，但是这个立方体是纯色的，并没有阴影明暗的变化，感觉很突兀

程序员说要有光

为了创造出更真实的立方体，需要先在场景中添加光源

var spotLight = new THREE.SpotLight( 0xffffff );

spotLight.position.set( -40, 60, -10);

scene.add( spotLight );

好的，现在再来看看渲染出的照片。。还是那个毫无空间感的立方体，看来只有光还是不行的，我门需要为立方体创建可以反射光的材质

材质（物体皮肤）

我们创建的立方体由骨骼和皮肤构成，骨骼是撑起这个立方体形状点线面，皮肤则决定了立方体呈现出什么样的质感，与其它物体和光线的干涉作用

var cubeMaterial = new THREE.MeshLambertMaterial({

    color: 0xffffff;

})

动起来

到目前为止，我们已经可以在浏览器指定的元素中，看到我们构建的空间和物体，不过跟 demo 中展示的差距好大，静态的三维物体是没有意义的，不如放一张图片，所以我们要先让这个立方体转起来

让 Threejs 对象动起来，不涉及任何新的概念或者技术，我们使用的是 requestAnimationFrame 循环执行 renderer.render, 就是简单的每隔 16ms 将我们对物体参数的修改重绘到画布上

var startRender = function(){

    cube.rotation.x += 0.01;

    requestAnimationFrame(startRender);

    renderer.render(scene, camera);

}

现在立方体在围绕自身坐标系的 x 轴做逆时针旋转，总算有些三维的感觉

经过简单的实践，基本对 Threejs 构建三维对象的过程有了具体的认知，将抽象概念具象为实际的操作和场景既便于理解也有利于记忆，接下来，我们还可以组合各种光源，构造阴影，设计复杂的组合体，使用粒子系统，加载外部模型，响应用户交互，添加碰撞与力学规律，将我们的世界构建的更丰富、更真实，相信浏览器对 webGL 对支持会越来愈好

Threejs初识－创世之旅