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/