Three.jsThree.js学习记录系列

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() 传入一个回调函数访问所有的对象。

二、属性示例

下面代码摘自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);
上一篇下一篇

猜你喜欢

热点阅读