001在场景中自定义光源绘制立方体

一般情况下，使用 Three.js 绘制一个三维图形需要下面的这些步骤（或元素）

(1) 创建渲染器，如 new THREE. WebGLRenderer();
(2) 指定渲染器在哪里渲染，如 $(‘#myContainer’).append(myRenderer.domElement);
(3) 创建场景，如 new THREE. Scene();
(4) 创建相机，如 new THREE. OrthographicCamera(-s k, s k, s, -s, 1, 1000);

(5) 创建光源，如 new THREE. PointLight(‘red’);
(6) 在场景中添加光源，如 myScene.add(myLight);
(7) 创建几何体，如 new THREE. BoxGeometry(100, 100, 100);
(8) 创建材质，如 new THREE. MeshLambertMaterial({ color: 0xffbf00 });
(9) 根据几何体和材质创建网格，如 new THREE. Mesh(myGeometry, myMaterial);
(10) 在场景中添加网格，如 myScene.add(myMesh);

(11) 开始渲染，即把场景和相机添加到渲染器中，如 myRenderer.render(myScene, myCamera);

var myRenderer = new THREE.WebGLRenderer(); // 创建渲染器
var myWidth = 480 ; // 设置窗口宽度
var myHeight = 320; // 设置窗口宽度
myRenderer.setSize(myWidth, myHeight); // 设置渲染区域
myRenderer.setClearColor('white', 1); // 设置清空颜色
console.log('myRenderer:', myRenderer);
$('#myContainer').append(myRenderer.domElement); // 将渲染器添加到页面中

var myScene = new THREE.Scene(); // 创建场景
var myLight = new THREE.PointLight('red'); // 创建红色光源
myLight.position.set(400, 800, 300); // 设置光源位置
myScene.add(myLight); // 将光源添加到场景中

var k = myWidth / myHeight; // 计算窗口宽高比
var s = 120; // 三维场景显示范围控制系数
var myCamera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); // 创建相机

myCamera.position.set(400, 300, 200); // 设置相机位置
myCamera.lookAt(myScene.position); // 设置相机观察的目标点

var myGeometry = new THREE.BoxGeometry(100, 100, 100); // 创建立方体
var myMaterial = new THREE.MeshLambertMaterial({
    color: 0xffbf00
}); // 创建材质
var myMesh = new THREE.Mesh(myGeometry, myMaterial); // 创建网格对象
myScene.add(myMesh); // 将网格添加到场景中

myRenderer.render(myScene, myCamera); // 渲染立方体