Three.js 学习记录(3) ----Scene(场景)
2018-02-22 本文已影响68人
Threejs开发者
一、基本介绍
从官网的的文档关于scene的API描述中可以看出,scene继承于Object3D。查看源码Scene.js文件也看可以佐证:
//Scene对象从THREE.Objec3D的原型继承所有属性方法
THREE.Scene.prototype = Object.create( THREE.Object3D.prototype );
那么Scene除了拥有Object3D对象的属性和方法外,还拥有自己的一些,下面分别介绍。
1、作用
Scene是场景对象,所有的对象,灯光,动画,骨骼等都需要放置在场景内.
2、常用属性
属性名 | 描述 |
---|---|
fog | 设置场景的雾化效果,可以渲染出一层雾气,隐层远处的的物体. |
overrideMaterial | 强制场景中所有物体使用相同的材质。 |
autoUpdate | 暂时没有用到 |
background | 暂时没有用到 |
children | 继承而来,所有对象的列表 |
3、常用方法
方法名 | 描述 |
---|---|
add() | 继承而来,向场景中添加对象。 |
remove() | 继承而来,从场景中移除对象。 |
getChildByName() | 继承而来根据名字直接返回这个对象。 |
traverse() | 传入一个回调函数访问所有的对象。 |
二、属性示例
- 针对一些常用的属性和方法做简单的代码使用示例。
- 对于属性的类型为指针时,就要使用new 关键字,如fog和overrideMaterial属性。
下面代码摘自three.js文件:
THREE.Scene = function () {
THREE.Object3D.call( this );
this.type = 'Scene';
this.fog = null;
this.overrideMaterial = null;
this.autoUpdate = true; // checked by the renderer
};
1、fog雾化效果
在定义完场景后加上雾化属性。
//定义一个白色的雾化效果(0xffffff)
//THREE.Fog = function ( color, near, far )
scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
题外话:
THREE.Fog()为全局函数可直接调用,在src/scenes/Fog.js文件中定义。
2、overrideMaterial覆盖材料
所有对象都用相同的材质和颜色渲染.
//定义一个材料颜色为白色,详细材料的介绍关注下面的更新内容作。
var scene = new THREE.Scene();
scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
三、方法示例
方法使用比较直接易懂。
scene.add(plane);
scene.remove(plane);