[WebAR和WebVR学习之路]组成Three.js场景的基本
组成Three.js场景的基本组件
《创建场景》
场景中的基本组件：相机、光源和几何体
THREE.Scene()对象就是以上基本组件的一个容器。
习题2-1：
创建一个平面、相机和适当光源。在dat.GUI中创建Add Cube和Remove Cube按钮，并显示目前场景中物体的个数。Add Cube和Remove Cube会分别在平面的上方创建或移除一个Cube，Cube保持第一章中的自旋动画并使用UI控制。
<!DOCTYPE html>
<html>
<head>
<title>Example 02.01 - Basic Scene</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
function init() {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
scene.add(camera);
// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
// rotate and position the plane
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
// add the plane to the scene
scene.add(plane);
// position and point the camera to the center of the scene
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
// add spotlight for the shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
spotLight.shadowMapHeight=4096;
spotLight.shadowMapWidth=4096;
scene.add(spotLight);
// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(renderer.domElement);
// call the render function
var step = 0;
var controls = new function () {
this.rotationSpeed = 0.02;
this.numberOfObjects = scene.children.length;
this.removeCube = function () {
var allChildren = scene.children;
var lastObject = allChildren[allChildren.length - 1];
if (lastObject instanceof THREE.Mesh) {
scene.remove(lastObject);
this.numberOfObjects = scene.children.length;
}
};
this.addCube = function () {
var cubeSize = Math.ceil((Math.random() * 3));
var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.name = "cube-" + scene.children.length;
// position the cube randomly in the scene
cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width));
cube.position.y = Math.round((Math.random() * 5));
cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height));
// add the cube to the scene
scene.add(cube);
this.numberOfObjects = scene.children.length;
};
this.outputObjects = function () {
console.log(scene.children);
}
};
var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'addCube');
gui.add(controls, 'removeCube');
gui.add(controls, 'outputObjects');
gui.add(controls, 'numberOfObjects').listen();
render();
function render() {
stats.update();
// rotate the cubes around its axes
scene.traverse(function (e) {
if (e instanceof THREE.Mesh && e != plane) {
e.rotation.x += controls.rotationSpeed;
e.rotation.y += controls.rotationSpeed;
e.rotation.z += controls.rotationSpeed;
}
});
// render using requestAnimationFrame
requestAnimationFrame(render);
renderer.render(scene, camera);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
}
window.onload = init
</script>
</body>
</html>
场景的相关函数：
Scene.Add()：向场景中添加物体
Scene.Remove()：在场景中移除物体
Scene.children()：获取场景中的所有子对象的列表
Scene.getChildByName()：获取场景中某个特定名字的子物体
在render函数中，我们的处理方式和上一章差不读，只不过在这里对使用scene.traverse()来进行一个对场景中的对象进行一个遍历，及对每个子对象都执行一次相应函数。
我们也可以使用for循环来遍历场景的children这个属性数组来达到相同的结果。
《场景的特殊效果》
Scene的雾
scene.fog=new THREE.FogExp2(0xffffff,0.015);
注意，使用雾会增加资源使用，降低帧率。
材质覆盖
scene.overrideMaterial=new THREE.MeshLambertMaterial({color:0xffffff});
使用上述函数将会覆盖场景中所有材质为指定材质
《几何体和网格对象》
在第一章我们用到了如何在场景中添加一个几何体和网格对象，如添加一个立方体的代码如下：
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
var cubeMaterial = new THREE.MeshPhongMaterial({color:0xff0000});
var cube=new THREE.Mesh(cubeGeometry,cubeMaterial);
scene.add(cube);
在上述代码中，我们定义了该网格对象的形状、几何结构、外观、材质等属性，并把这些属性和一个名为cube的网格对象结合在一起。
《几何对象的属性和函数》
geometry变量：
geometry变量是三维空间中的点集以及将这些点连接起来的面。（顶点vertice和面face）
例如：一个立方体有8个顶点（8个角），每个顶点的空间坐标为一个x,y,z的组合。这些点称为顶点
一个立方体有6个面，这6个面称为face。
像在opengl里面定义几何体一样，我们可以使用定义顶点和面的方法来定义一个几何体：
var vertices=[
new THREE.Vector3(1,3,1),
new THREE.Vector3(1,3,-1),
...
new THREE.Vector3(-1,-1,1)
];
var faces=[
new THREE.Face3(0,2,1),
new THREE.Face3(2,3,1),
...
new THREE.Face3(3,6,4)
];
var geom=new THREE.Geometry();
geom.vertices=vertices;
geom.faces=faces;
geom.computeCentroids();
geom.mergeVertices()();
关于如何动态修改几何体的顶点和面的知识，会在后面讲到。
《网格对象的函数和属性》
网格对象的主要属性：
position
Rotation
Scale
TranslateX
TranslateY
TranslateZ
上述属性与Unity3D API中的Transform的属性相类似
可以通过直接修改position的值来改变网格物体的位置，网格物体的position其实质上是一个THREE.Vector3类型的变量，所以其设置的方法有如下：
Obj.position.x=1;…
Obj.position=new THREE.Vector3(1,2,3);
Obj.position.set(1,2,3);
在设置对象位置的过程中，设置的位置是相对于其父对象的位置而设置的。比如使用THREE.SceneUtils.createMultiMaterialObject()创建多个不同材质的对象时，返回的不仅仅是一个对象，而是一个对象组。如果我们改变其中一个对象的位置的时候，另一个对象不会发生改变，如果改变这个对象组的位置的时候，其所有子物体都会发生改变。（父子阶层）
对于rotation的操作对象是数学中的弧度（rad），一个物体旋转一周的弧度是2*PI。所以我们的旋转操作代码如下：
Obj.rotation.x=0.5*Math.PI;(旋转0.5π个弧度，即旋转90度)
Obj.rotation.set(0.5*Math.PI,0,0);
Obj.rotation=new THREE.Vector3(0.5*Math.PI,0,0);
上述代码表示绕着x轴旋转90°的操作。
Scale基本同上。
对于translate函数，使用translate可以改变物体的位置，translate是相对于物体所移动的位移，而非绝对位置（与Unity的Translate类似）。
《相机》
正交相机和透视相机是所有的3D引擎中都存在的2种相机。对于不同的需求我们选择使用不同的相机。
对于透视相机THREE.PerspectiveCamera主要参数如下：
Fov（视角场）：人类眼镜的视野大概为180°，一些鸟类有着360°的视野，在游戏中我们通常使用60到90°的视角，而在普通的3D应用中我们推荐使用45°的视野。
Aspect（长宽比）：长宽比指的是渲染结果输出的横向长度和纵向长度的比值。推荐使用window.innerWidth/window.innerHeight
Near（近视平面）
Far（远视平面）
对于正交相机THREE.OrthographicCamera的主要参数如下：
Left（左边界）
Right（右边界）
Top（上边界）
Bottom（下边界）
Near（近视平面）
Far（远视平面）
以上一些属性及其含义可以在OpenGL的官网文档中找到。
如何让相机看向指定位置？
使用camera.lookAt(new THREE.Vector3(x,y,z));函数做到使相机看向x,y,z点。
