1.场景

在Three.js中添加的物体都是添加到场景中的，因此它相当于一个大容器。一般说，场景来没有很复杂的操作，在程序最开始的时候进行实例化，然后将物体添加到场景中即可。

2.照相机

我们使用Three.js创建的场景是三维的，而通常情况下显示屏是二维的，那么三维的场景如何显示到二维的显示屏上呢？照相机就是这样一个抽象，它定义了三维空间到二维屏幕的投影方式，用“照相机”这样一个类比，可以使我们直观地理解这一投影方式。

3.渲染器

渲染器将和Canvas元素进行绑定，用于渲染三维场景。用通俗的话来说，渲染就是将模型数据在屏幕上显示出来的过程。

静止的立方体的例子

(function () {//声明一个渲染器（用于展示）var renderer2 = new THREE.WebGLRenderer();renderer2.setSize(400,300);document.getElementsByTagName('body')[0].appendChild(renderer2.domElement);renderer2.setClearColor(0x000000);//声明一个场景（添加的物体都在这个场景中）var scene2 = new THREE.Scene();//设置照相机（相当于眼睛）var camera2 = new THREE.PerspectiveCamera(60, 400/300, 1, 1000);//透视投影照相机camera2.position.set(1,1,5);scene2.add(camera2);//声明物体var cube22 = new THREE.Mesh(new THREE.CubeGeometry(2,2,2),    new THREE.MeshBasicMaterial({        color: 0xff0000,        map: THREE.ImageUtils.loadTexture('img/11.png',{},function () {            renderer2.render(scene2,camera2);        })    }));cube22.position.set(1,1,1);cube22.lookAt(new THREE.Vector3(0,0,0));scene2.add(cube22);//设置光源var light2 = new THREE.PointLight(0xffffff,2,100);light2.position.set(0,0,5);scene2.add(light2);//场景，照相机，物体都声明好了，现在要用渲染器渲染出结果了renderer2.render(scene2,camera2);})()

能动的正方体例子

(function () {//声明渲染器var renderer3 = new THREE.WebGLRenderer();renderer3.setSize(400,300);document.getElementsByTagName('body')[0].appendChild(renderer3.domElement);renderer3.setClearColor(0x000000);//声明一个场景（添加的物体都在这个场景中）var scene3 = new THREE.Scene();//设置照相机（相当于眼睛）var camera3 = new THREE.PerspectiveCamera(60, 400/300, 1, 1000);//透视投影照相机camera3.position.set(0,0,5);scene3.add(camera3);//声明物体var cube32 = new THREE.Mesh(new THREE.CubeGeometry(2,2,2),    new THREE.MeshBasicMaterial({        color: 0xff0000,        map: THREE.ImageUtils.loadTexture('img/11.png',{},function () {            renderer3.render(scene3,camera3);        })    }));cube32.lookAt(new THREE.Vector3(0,0,0));scene3.add(cube32);//设置光源var light3 = new THREE.PointLight(0xffffff,2,100);light3.position.set(0,0,5);scene3.add(light3);//场景，照相机，物体都声明好了，现在要用渲染器渲染出结果了renderer3.render(scene3,camera3);//动画function draw() {    cube32.rotation.x += Math.sin(Math.random()*0.05);    cube32.rotation.y += Math.sin(Math.random()*0.05);    renderer3.render(scene3,camera3);    requestAnimationFrame(draw);}requestAnimationFrame(draw);})()