ThreeJs：二、简单立方体

前言

在第一节中，我们介绍了创建一个三维对象所需要的基本要素。下面我们就要开始尝试做一个旋转的立方体了。

---

准备工作

• 引入three.js的库文件

---

• 创建场景(Scene)
  创建一个场景，并且获取浏览器屏幕的宽高。

---

• 
  
• 创建照相机(Camera)
  

这里创建的是一个远景相机(PerspectiveCamera)，为什么选择远景相机进行投影呢?，因为远景投影也称之为透视投影。这个是我们人眼观察世界的模式。

构造器介绍：
PerspectiveCamera( fov, aspect, near, far )
fov - 从上往下的观察角度
aspect - 宽高比
near - 相机近裁剪面
far  - 相机远裁剪面

---

• 设置物理材质
  物理材质相当于物体表面的颜色，花纹等特征。
  基础物体材料（MeshBasicMaterial）:一个以简单着色（平面或线框）方式来绘制几何形状的材料。
  图示：
  

---

• 创建物体(Mesh)
  

构造器介绍:
Mesh( geometry, material )
geometry - 一个几何模型的实例。
material - 一个材料的实例，用来定义对象的外观。

---

• 创建渲染器(Render)

方法介绍:
setSize
调整输出canvas尺寸（宽度，高度），要考虑设备像素比，并且设置视口（viewport）以匹配该尺寸。
render ( scene, camera, renderTarget, forceClear )
使用相机渲染一个场景。

---

• 进行渲染

---

效果图

---

代码预览：

/* eslint-disable */
(function() {
    // 创建场景
    var scene = new THREE.Scene();

    var width = window.innerWidth;
    var height = window.innerHeight;
    // 相机
    var camera = new THREE.PerspectiveCamera(40, 800/ 600, 1, 1000);
    camera.position.set(200,200,200);
    camera.lookAt(scene.position);
    // 材质
    var geometry = new THREE.CubeGeometry(100,100,100);
    var material = new THREE.MeshBasicMaterial({color: 0xfff00a});

    // 物体
    var cube = new THREE.Mesh(geometry, material);  
    scene.add(cube);
    // 灯光
    var light = new THREE.PointLight({color:0xf00fff});
    light.position.set(300,400,200);
    scene.add(light);
    // 渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(800, 600);
    document.body.appendChild(renderer.domElement);

    renderer.render(scene, camera);
    // 动画旋转
    function render() {
        requestAnimationFrame(render);
        cube.rotation.x += 0.1;
        cube.rotation.y += 0.1;
        renderer.render(scene, camera);
    }
    // render();
})();

---

资源网站

threejs源码地址：https://github.com/mrdoob/three.js
threejs API文档：https://hypnosnova.github.io/
threejs中文教程：http://techbrood.com/threejs/docs/