three.js（二）基本场景搭建

最近在做一些3D可视化，感觉webgl的方法太过于复杂，使用three.js可以大大简化自己的代码量。同时three.js的api也基本可以满足我们项目的要求。

实现的步骤：

1。我们需要引入three.js的包。可以cdn引入，也可以通过下载js文件本地引入。

2。一个完整的流程，需要场景，照相机，渲染器。我们需要分布来实现。

实现场景： 

   var scene  = new THREE.Scene();   //实现一个场景，可以往场景里面添加元素

实现照相机：(这里我使用的是透视照相机）

 简单介绍一下透视照相机：4个参数，分别是角度，场景长宽的比例，近距离，远距离

 camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 1000);            camera.position.set(100, 300, 100); //设置照相机的位置            camera.lookAt(new THREE.Vector3(0, 0, 0)); //让照相机指向原点

解释一下 camera.lookAt(new THREE.Vector3(0, 0, 0));  一般来说照相机的默认位置是z轴的负轴位置， 我们需要调整照相机指向的位置来调整合适我们的角度。

场景和照相机搭建完成以后我们可以往scene里面添加物体。

2(1): 添加一个平面： 

  function plane() {            var planeGeo = new THREE.PlaneGeometry(150, 150); //创建平面            var planeMat = new THREE.MeshLambertMaterial({ //创建材料                color: 0x666666,                wireframe: false            });            var planeMesh = new THREE.Mesh(planeGeo, planeMat); //创建网格模型            planeMesh.position.set(0, 0, 0); //设置平面坐标            planeMesh.rotation.x = -0.5 * Math.PI; //绕x逆时针旋转90度            // planeMesh.rotation.y = 0.5 * Math.PI;            planeMesh.rotation.z = -0.25 * Math.PI;            scene.add(planeMesh); //加入场景中；        };
    通过rotation和position来调整平面的角度和位置，达到我们需要的效果。

2(2): 添加一个矩形：

  function cube() {            var cubeGeo = new THREE.CubeGeometry(20, 20, 20);            var cubeMaterial = new THREE.MeshLambertMaterial({                color: 'red',                wireframe: false            });            var cubeMesh = new THREE.Mesh(cubeGeo, cubeMaterial);            cubeMesh.position.set(0, 40, 0);            scene.add(cubeMesh);        }

3.物体添加完一个需要添加渲染器：

   var renderer = new THREE.WebGLRenderer();

   renderer.render(scene,camera);

这样一个基本的场景就搭建完成。