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/