three.js学习一——hello world - cytggit/Map-openlayers GitHub Wiki

场景（scene）-一种场景

var scene = new THREE.Scene(); 

相机（camera）-多种相机

// 透视相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

渲染器（renderer）

// 渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

添加物体到场景

var geometry = new THREE.CubeGeometry(1,1,1); // 立方体
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material); 
scene.add(cube);

渲染

// 渲染应该使用渲染器，结合相机和场景来得到结果画面
renderer.render(scene, camera); 

渲染循环

渲染有两种方式：实时渲染和离线渲染
function render() {
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}