初探three.js

 

相信大多数选择前端的小伙伴都有一个设计师的梦，今天我来说一说three.js。three.js是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。学习了它之后，就可以在3D发挥你无穷的想象力和设计能力。虽说他是js，但是实际上是对WebGL的封装，对于不那么international得小伙伴来说文档可能不那么友好，相关中文文章零零散散又多又单薄，今天记录一下最近学习的情况，让广大萌新少走一些弯路。

1.渲染3D场景的一些条件

首先3D场景渲染的主角当然是一个场景啦，这个场景就是我们多能看到的全部内容，它包括一些光源light，和一个网格mesh。而网格又可以分成几何体geometry和材质material,几何体和材质又可以分成好多种，我们一会再说。
场景有了，那么在一个空间中，我们以什么视角去看这个场景呢？所以说我们还需要一个摄像机camera，他的功能其实就类似于我们的眼睛。常见的相机有两种，一种是正交投影相机orthographicCamera，另一种是透视相机，区别我们以后说。

2. 简单几何体

几何体按照维度分为二维几何体和三维几何体，二维几何体就是各种面，它们默认都在XY轴组成的平面上。三维几何体有宽度（X轴）高度（Y轴）和深度（Z轴）的划分。

日后还会记录复杂几何体。

3.材质

材质是几何体面的皮肤，决定几何体的外表。

这些材料都是比较常用的,我们也可以在一种几何体上面使用多种材质（其实是在对象的children中生成了多个网格）。

4.光源

three.js的光源都是从生活中抽象出来的，效果也和我们生活中的相差无几。下面前四种是经常用的

注意，这些光源的默认值有阴影的区分。

5. 摄像机

之前说过摄像机有正交投影相机和透视相机之分，我们使用不同的摄像机，所呈现的东西也不一样。正交相机的距离对于渲染的结果没有什么影响，多数用在游戏中，他有7个参数分别是左边界、有边界、上边界、下边界、近面距离、远面距离、变焦。透视相机和我们人的眼睛看到的十分相近，都是近大远小，他有5各参数，分别是视场（视野所及的范围角），长宽比，近面距离，远面距离，变焦。我们经常使用透视相机。

6.渲染器

渲染器实际上就是调用GL底层的渲染方法，如果不使用渲染器，我们什么都看不到。渲染起的也分好多种，使用最多的是WebGLRender();他有两个参数，分别是场景scene和相机camera。

7. 小demo

var scene = new THREE.Scene();
 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 var renderer = new THREE.WebGLRenderer();
 renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
 renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.shadowMapEnabled = true;
 var planeGeometry = new THREE.PlaneGeometry(60, 20);
 var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
 var plane = new THREE.Mesh(planeGeometry, planeMaterial);
 plane.receiveShadow = true;
 plane.rotation.x = -0.5 * Math.PI;
 plane.position.x = 15;
 plane.position.y = 0;
 plane.position.z = 0;
 scene.add(plane);
 var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
 var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
 var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
 cube.castShadow = true;
 cube.position.x = -4;
 cube.position.y = 3;
 cube.position.z = 0;
 scene.add(cube);
 var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
 var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
 var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
 sphere.position.x = 20;
 sphere.position.y = 4;
 sphere.position.z = 2;
 sphere.castShadow = true;
 scene.add(sphere);
 camera.position.x = -30;
 camera.position.y = 40;
 camera.position.z = 30;
 camera.lookAt(scene.position);
 var spotLight = new THREE.SpotLight(0xffffff);
 spotLight.position.set(-40, 60, -10);
 spotLight.castShadow = true;
 scene.add(spotLight);
 document.getElementById("WebGL-output").appendChild(renderer.domElement);
 renderer.render(scene, camera);

预览demo请移步至原文http://www.bettersmile.cn

下一章我们详细的讲一讲几何体。