4.three.js Scene场景配置

287 阅读2分钟

THREE.Scene的作用

1.THREE.Scene 对象是包含所有场景内所有物体的容器,该对象保存所有的物体、光源、摄像机以及渲染所需的其他对象。

2.THREE.Scene 对象又是被称为场景图,它不仅是一个对象数组,还包含了整个场景图树形结构中的所有节点。

THREE.Scene 常用的方法和属性

add(object)

用于向场景中添加对象。使用该方法还可以创建对象组。

children

用于返回一个场景中所有对象的列表,包括摄像机和光源。

getObjectByName(name,recursive)

在创建对象时可以指定唯一的标识 name,使用该方法可以查找特定名字的对象。

  • 当参数 recursive 设置为 false 时,在调用者子元素上查找
  • 当参数 recursive 设置为 true 时,在调用者的所有后代对象上查找

remove(object)

object 为场景中对象的引用,使用该方法可以将对象从场景中移除。

traverse(function)

该方法也可以遍历调用者和调用者的所有后代,function 参数是一个函数,被调用者和每一个后代对象调用 function 方法。

fog

使用该属性可以为场景添加雾化效果,可以产生隐藏远处物体的浓雾效果。

overrideMaterial

使用该属性可以强制场景中的所有物体使用相同的材质。

------------案例实验代码-------------

生成一个场景:

new THREE.Scene()

场景雾化:

scene.fog = new THREE.Fog(0xffffff,28, 40);//线性雾化(颜色,距离相机多远开始雾化,完全雾化的距离)

scene.fog = new THREE.FogExp2( 0xffffff, 0.015 );//指数雾化(颜色,浓度)

重设场景中所有物体的材质

scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});

获取场景中指定名字的对象

例如,在生成物体时,指定物体名称。使用scene.getObjectByName获取场景中指定名称的物体。

生成物体时指定名字:
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.name = "cube-" + sceneChildrenLength;

获得制定名称的物体:
scene.getObjectByName('cube-..')



getObjectByName有两个参数:第一个是名称,第二个是是否深层遍历

删除物体

scene.remove(obj)

将参数传递到每一个子元素上

Scene.traverse()可以将参数传递到每一个子元素上。

首先定义一个作用于物体的方法

const traverse = (obj:any) => {    if (obj instanceof THREE.Mesh && obj.name !== 'plane') {      obj.rotation.x += 0.1;      obj.rotation.y += 0.1;      obj.rotation.z += 0.1;    }  }

在渲染器上将方法作用于每一个对象

const animate = () => {    controls.update();    scene.traverse(traverse)    renderer.render(scene, camera);    requestAnimationFrame(animate);  }