一个场景至少需要的三种类型组件
相机/决定哪些东西将在屏幕上渲染
光源/他们会对材质如何显示，以及生成阴影时材质如何使用产生影响
物体/他们是在相机透视图里主要的渲染队形：方块、球体等
THREE.Scene 的作用
（1）THREE.Scene 对象是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象。
（2）THREE.Scene 对象又是被称为场景图，它不仅仅是一个对象数组，还包含了整个场景图树形结构中的所有节点：
- 每个添加到 Three.js 场景的对象，甚至包括 THREE.Scene 本身都是继承自一个名为 THREE.Object3D 的对象。
- 每个 THREE.Object3D 对象也可以有自己的子对象，我们可以使用它的子对象来创建一个 Three.js 能解释和渲染的对象树。
2，THREE.Scene 常用的方法和属性
| 方法（属性） | 描述 |
|---|---|
| add(object) | 用于向场景中添加对象。使用该方法还可以创建对象组。 |
| children | 用于返回一个场景中所有对象的列表，包括摄像机和光源。 |
| getObjectByName(name,recursive) | 在创建对象时可以指定唯一的标识 name，使用该方法可以查找特定名字的对象。当参数 recursive 设置为 false 时，在调用者子元素上查找 , 当参数 recursive 设置为 true 时，在调用者的所有后代对象上查找 |
| remove(object) | object 为场景中对象的引用，使用该方法可以将对象从场景中移除。 |
| traverse(function) | 该方法也可以遍历调用者和调用者的所有后代，function 参数是一个函数，被调用者和每一个后代对象调用 function 方法。 |
| fog | 使用该属性可以为场景添加雾化效果，可以产生隐藏远处物体的浓雾效果。 |
| overrideMaterial | 使用该属性可以强制场景中的所有物体使用相同的材质。 |
完整案例【转】：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="vendor/three.min.js"></script>
<script type="text/javascript" src="vendor/stats.min.js"></script>
<script type="text/javascript" src="vendor/dat.gui.min.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>
完整代码：github地址 欢迎star
网友评论