利用HTML5构筑物理模拟环境2.23

奔跑的小兔

３．声明场景
场景就是一个三维空间。 用 [Scene] 类声明一个叫 [scene] 的对象。
var scene;

function initScene() {

  scene = new THREE.Scene();

}４．设置光源并追加到场景

OpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。 而且，作为点光源的一种特例还存在平行光源(无线远光源)。另外，作为光源的参数还可以进行 [环境光] 等设置。 作为对应， Three.js中可以设置 [点光源(Point Light)] [聚光灯(Spot Light)] [平行光源(Direction Light)]，和 [环境光(Ambient Light)]。 和OpenGL一样、在一个场景中可以设置多个光源。 基本上，都是环境光和其他几种光源进行组合。 如果不设置环境光，那么光线照射不到的面会变得过于黑暗。 本文中首先按照下面的步骤设置平行光源，在这之后还会追加环境光。

(0) 声明全局变量(对象)

(1) 设置平行光源

(2) 设置光源向量

(3) 追加光源到场景
var light;                                                //(0)

function initLight() {

  light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);   //(1)

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

  scene.add(light);                                       //(3)

}用「DirectionalLight」类声明一个叫 [light] 的对象来代表平行光源，之后在构造函数中进行属性设置
var light = new THREE.DirectionalLight( hex, intensity)「hex」是用来以16进制指定光源的颜色。默认是白色「0xFFFFFF」。 「intensity」是光源的强度。默认为1。 另外，还需要通过对象的属性来设置平行光源的方向。
light.position.set( x, y, z );光源方向向量是从通过[set()]方法指定的点(x, y, z)开始到 点(0, 0, 0) 的方向，和向量的大小没有关系。 和相机的位置坐标设置一样，直接修改「position.x, position.y, position.z」属性也可以。 最后通过 [add] 方法追加光源到场景中去。
动作确认

请试着修改(1),(2)来明确平行光源的方向以及光线的颜色设置原理。
※注意：三维世界中物体的颜色不只是由光源的颜色来决定，而且还和物体本身的颜色有关。 之后会再次说明， 因为这个立方体的颜色为红色(0xFF0000),光源中即使存在绿色或者蓝色，立方体看起来的颜色也不会改变。也就是说， 就这个立方体来说，光源的颜色不论是「0xFFFF00」还是「0xFF0000」看起来颜色都没有变化。
其他光源

var light = new THREE.AmbientLight( hex );                               //(1)環境光源

var light = new THREE.PointLight( hex, intensity, distance );            //(2)点光源

var light = new THREE.SpotLight( hex, intensity, distance, castShadow ); //(3)スポットライト光源５．声明立方体并追加到场景

终于要向三维空间中追加物体了。
var cube;                                            //(0)

function initObject(){

  cube = new THREE.Mesh(                             //(1)

    new THREE.CubeGeometry(50,50,50),                //(2)

    new THREE.MeshLambertMaterial({color: 0xff0000}) //(3)

  );

  scene.add(cube);                                   //(4)

  cube.position.set(0,0,0);                          //(5)

}(1) 声明 [Mesh] 类的对象 [cube]。 设置构造函数的第一个参数「形状对象（geometory）」、第二个参数[材质对象（material）]。 第一参数中设置的代表立方体的形状对象，通过「CubeGeometry」类可以创建。
var geometry = THREE.CubeGeometry ( width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides );构造函数中的「width」「height」「depth」代表立方体的宽高及深度，其他的参数可以省略。 第二个参数中代入的材质对象， 本文中使用的是反射来自光源的光线的材质 「MeshLambertMaterial」类创建的对象。
var geometry = THREE.MeshLambertMaterial( parameters );构造函数中的参数是联想队列。 本例中、物体的颜色指定为「color: 0xff0000」。另外，通过联想队列参数还可以指定环境光的颜色。关于这些之后我们再介绍。 通过步骤(4),(5)追加立方体到场景，并指定位置坐标。
动作确认

请试着修改(2),(3),(5)来明确怎么设置立方体的大小， 颜色和位置。
其他形状类

THREE.CubeGeometry ( width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides );//立方体

THREE.CylinderGeometry ( radiusTop, radiusBottom, height, segmentsRadius, segmentsHeight, openEnded );//円錐型

THREE.OctahedronGeometry ( radius, detail ) //八面体

THREE.PlaneGeometry ( width, height, segmentsWidth, segmentsHeight ); //平面型

THREE.SphereGeometry ( radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength );//球型

THREE.T***sGeometry ( radius, tube, segmentsR, segmentsT, arc )//トーラス型