THREE.Scene
- THREE.Scene 对象是一切差别对象的容器，也就是说该对象保留一切物体、光源、摄像机以及衬着所需的其他对象。
- THREE.Scene 对象又是被称为场景图，它不仅仅是一个对象数组，还包含了全部场景图树形构造中的一切节点：
每一个增添到 Three.js 场景的对象，以至包含 THREE.Scene 自身都是继续自一个名为 THREE.Object3D 的对象。
每一个 THREE.Object3D 对象也可以有本身的子对象，我们可以运用它的子对象来建立一个 Three.js 能诠释和衬着的对象树。
| 组件 | 形貌 |
|---|
| 相机 | 决议哪些东西在屏幕上衬着 |
| 光源 | 对材质怎样显现，以及天生暗影时材质怎样运用产生影响 |
| 物体 | 相机里主要的衬着对象，如方块、球体 |
THREE.Scene()就像是一切这些对象的容器。下面是对场景对象最主要的函数
| 函数/属性 | 形貌 |
|---|
| add(Object) | 增添对象到场景中 |
| children | 返回场景中一切对象的列表，包含相机和光源 |
| getChildByName(name) | 应用name属性，返回场景中特定的对象 |
| remove(Object) | 把对象从场景中删除 |
| traverse(function) | 经由过程traverse这个函数，我们可以经由过程回调函数接见场景对象及其子对象 |
| fog | 经由过程这个属性，可以设置场景中的雾化效果，它可以衬着出一层雾气 |
| overrideMaterial | 经由过程这个属性，可以强迫场景中的一切物体都运用雷同的材质 |
| background | 经由过程这个属性，可以设置场景的背景，它老是第一个被衬着，可以是Color、纹理Texture掩盖、或许CubeTexture |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>场景</title>
<script type="text/javascript" src="../code/js91/three.js"></script>
<script type="text/javascript" src="../code/lib/Stats.js"></script>
<script type="text/javascript" src="../code/lib/dat.gui.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 用于显现统计图形 -->
<div id="Stats-output">
</div>
<!-- 作为Three.js衬着器输出元素 -->
<div id="WebGL-output">
</div>
<script type="text/javascript">
//网页加载终了后会被挪用
function init() {
////初始化统计对象
var stats = initStats();
//建立一个场景（场景是一个容器，用于保留、跟踪所要衬着的物体和运用的光源）
var scene = new THREE.Scene();
//建立一个摄像机对象（摄像机决议了可以在场景里看到什么）
var camera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 0.1, 1000);
//设置摄像机的位置，并让其指向场景的中间（0,0,0）
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
//建立一个WebGL衬着器并设置其大小
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
//建立一个平面
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;
//设置平面的扭转角度和位置
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
//将平面增添场景中
scene.add(plane);
//增添环境光
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
//增添聚光灯光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
//将衬着的效果输出到指定页面元素中
document.getElementById("WebGL-output").appendChild(renderer.domElement);
//dat.GUI对象运用的设置（寄存有一切须要转变的属性的对象）
var controls = new function () {
//扭转速率
this.rotationSpeed = 0.02;
//场景对象个数
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;
//立方体位置随机
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));
//将立方体增添到场景中
scene.add(cube);
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.overrideMaterial = function() {
scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
}
//雾化
this.foggy = function() {
scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
}
//输出一切对象
this.outputObjects = function () {
console.log(scene.children);
}
};
//建立dat.GUI，通报并设置属性
var gui = new dat.GUI();
gui.add(controls, 'numberOfObjects').name("当前对象个数").listen();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'addCube');
gui.add(controls, 'removeCube');
gui.add(controls, 'overrideMaterial').name("运用雷同材质");
gui.add(controls, 'foggy').name("雾化");
gui.add(controls, 'outputObjects').name("输出一切对象");
//衬着场景
render();
//衬着场景
function render() {
stats.update();
//扭转一切的立方体
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;
}
});
//经由过程requestAnimationFrame要领在特定时候距离从新衬着场景
requestAnimationFrame(render);
//衬着场景
renderer.render(scene, camera);
}
//初始化统计对象
function initStats() {
var stats = new Stats();
//设置统计形式
stats.setMode(0); // 0: fps, 1: ms
//统计信息显现在左上角
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
//将统计对象增添到对应的<div>元素中
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
}
//确保init要领在网页加载终了后被挪用
window.onload = init
</script>
</body>
</html>
