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); // 循环执行
}