使用Three.js 基本组件以及流程

1. 创建场景

var scene = new THREE.Scene();

 

2. 创建相机，设置可视范围

var camera = new THREE.PerspectiveCamera(45,  windows.innerWidth / windows.innerHeight, 0.1, 100) ;

 

3. 创建渲染器， 设置渲染范围， 并加载到页面中去

var renderer = new THREE.WebGLRenderer();

renderer.setsize(window.innerWidth, window.innerHeight); 

document.body.appendChild(renderer.domElement);

 

4. 设置灯光, 并添加到场景中

var light = new THREE.DirectionalLight(oxFF0000, 1.0)  // 方向光

light.position.set(100, 100, 200);

secen.add(light);

 

3.创建几何体，添加材料（或纹理），创建 网格对象， 将 网格对象 添加到 场景 中

var geometry = new THREE.CubeGeometry(1,1,1);

var material = new THREE.MeshBasicMaterial{collor : 0x00ff00}) // 或 {map : something}

var cube = new THREE.Mesh(geometry, material);

scene.add(cube);

 

 5.渲染（结合相机与场景）

  renderer.add(scene, camera);

实时渲染：

function render () {

　　cube.rotation.x += 0.1;   // 物体绕 x 轴旋转

　　renderer.add(scene, camera);

　　requestAnimationFrame(render); // 循环执行

}