webgl之threejs入门

相信很多经常上网的人都看过一些很酷炫的3d效果，作为技术开发来说，这其中包含了什么高含金量的技术呢？今天就来带大家入门一个简单的3d效果开发。

首先我们到github下载threejs的文件，在html文件中引入three.js和OrbitControls.js，接下来我们逐步来实现一个旋转的长方体。

1.创建场景对象

var scene = new THREE.Scene();

2.创建网格模型和添加到场景

var geometry = new THREE.BoxGeometry(400, 100, 100); // 创建一个长方体几何对象Geometry
var material = new THREE.MeshLambertMaterial({
  color: 0x0000ff
});                                                  // 材质对象Material
var mesh = new THREE.Mesh(geometry, material);       // 网格模型对象Mesh
scene.add(mesh);

3.创建设置点光源并添加到场景

var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300);                  // 点光源位置
scene.add(point);

4.创建环境光并添加到场景

var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);

5.创建并设置相机

var width = window.innerWidth;                     // 窗口宽度
var height = window.innerHeight;                   // 窗口高度
var k = width / height;                            // 窗口宽高比
var s = 300;                                       // 三维场景显示范围控制系数，系数越大，显示的范围越大
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);                // 创建相机对象
camera.position.set(250, 300, 200);                // 设置相机位置
camera.lookAt(scene.position);                     // 设置相机方向(指向的场景对象)

6.创建设置渲染器对象

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);                   // 设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1);               // 设置背景颜色

7.body元素中插入canvas对象

document.body.appendChild(renderer.domElement);

8.设置旋转效果

let T0 = new Date();                              // 上次时间
function render() {
    let T1 = new Date();                          // 本次时间
    let t = T1-T0;                                // 时间差
    T0 = T1;                                      // 把本次时间赋值给上次时间
    requestAnimationFrame(render);
    renderer.render(scene, camera);               // 执行渲染操作
    mesh.rotateY(0.001 * t);                      // 旋转角速度0.001弧度每毫秒
}
render();

9.加入鼠标左键拖拽旋转、右键拖拽和滚轮缩放

new THREE.OrbitControls(camera, renderer.domElement);

至此，我们就完成了一个可以旋转的长方体，还可以通过鼠标进行左键拖拽旋转、右键拖拽和滚轮缩放等操作。