threejs 学习系列 01

这一节我们来学习场景

要求掌握这些

• three.js 场景中使用哪些组件
• THREE.Scene() 对象是做什么的
• 几何图形和网格是如何关联的
• 正投影 和 透视相机的区别

three.js 场景中的基本构成有这三个

• 相机 决定哪些东西要在屏幕上显示
• 光源 会对材质如何显示，生成阴影时材质如何使用 产生影响
• 物体 是在相机透视图里主要的渲染对象

THREE.Scene() 相关文档

场景的添加 和删除

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);
            }
        };

这段代码很容易读懂就是添加 和删除 方块，这段代码里的新东西就是 我们使用了一个name 属性为这个方块指定了一个名字，方块的名字是在cube-后面加上当前场景中 对象的数量

Scene.getChildByName(name) 函数可以直接获取指定的对象

与场景相关的函数

• Scene.Add() 添加物体
• Scene.Remove() 从场景中移除物体
• Scene.children() 获取场景中所有子对象的列表
• Scene.getChildByName() 利用 name 属性获取场景中某个特定的物体

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);
        }

递归调用 render 通过浏览器的 requestAnimationFrame()方法 动态刷新可以让动画 更加的自然 不要用 setInterval() 和浏览器渲染之间存在延迟 导致动画不够流畅

 scene.traverse(function (e) { ......})

这个traverse() 函数将会在场景中每一个子对象调用一次，也可以使用for 循环来达到同样的目的

给场景中添加雾化效果

scene.fog = new Three.Fog(#000,0.015,100)
scene.fog = new Three.FogExp2( #fff, 0.015 )

下面是这个方法的属性 和 构造器


使用材质 覆盖属性

scene.overrideMaterial = new THREE.meshLamberttMaterial({  color:#000 })

该属性用来设置所有物体的材质

这一节我们学习了 three.js 库中首要的核心概念 场景，有关场景我们要记住的最重要的是：
它基本上是渲染过程中你想用的所有的物体，光源，相机的容器

• add(object) 在场景中添加对象
• children 返回一个场景中所有对象的列表 包括相机和光源
• getChildByName(name) 创建对象时可以通过name 属性为指定一个独一无二的名字
• remove(object) 在场景中删除对象
• traverse(function) children 属性返回场景中所有的子对象列表 ，通过 traverse()函数我们同样可以传入一个回调函数访问这些子对象
• fog 通过该属性我们可以设置场景的雾化效果
• overrideMaterial 通过这个属性 你可以强制场景中的所有物体都使用相同的材质