THREE.JS 2.0 场景及场景中的对象

JavaScript034

THREE.JS 2.0 场景及场景中的对象,第1张

场景中的三要素

camera 相机

spotLight 光源

object (plane、cube...)物体

一个只有一个平面的简单场景中已经包含了几个对象

其中包括使用 Scene.add(object) 加载进场景的几个对象

场景渲染的时候camera对象会自动添加进来

从几个函数来理解THREE.Scene()对象

1、在场景中添加物体 Scene.Add()

2、移除物体 Scene.Remove()

3、获取场景中所有子对象列表 Scene.children

4、利用name 属性,获取场景中某个特定的物体 Scene.getChildByName()

5、这是一个回调函数返回所有子对象列表 scene.traverse()

在这里的效果同使用for 循环遍历children这个属性

6、雾化属性 在添加完场景后即可添加,可以使整个场景有一种雾化的效果

scene.fog = new THREE.Fog(0xffffff,0.015,100)

7、使场景中的所有物体都使用相同的材质

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

var geom = new THREE.Geometry()

geom.vertices = vertices vertices数组定义了构成几何体的点;

geom.faces = faces 将vertices里面的点连接起来,创建成三角面片,就形成了faces数组;

geom.verticesNeedUpdate = true 告诉geom对象 上面的属性需要更新;

geom.computeCentroids() 计算geom中face数组里每一个面的重心;

geom.computeFaceNormals() 该函数用来重新计算侧面,从而完成整个模型的更新

geom.mergeVertices() 从字面上的意思可以理解为将几何体的面融成一个立体;

geom.clone() 创建出一个geom对象的副本,赋予不同的材质后,就可以使用这个副本创建不同的网格对象。

mesh.position

mesh.rotation

mesh.scale

mesh.translateX

mesh.translateY

mesh.translateZ

cube.position.set(10,3,1)

cube.position = new THREE.Vector3(10,3,1)

1、在controls 中添加方法变量

属性变量是这样的: this.positionX = 1

方法变量:

2、把对象传递给gui (无取值范围)

gui.add(controls,'translate')

这样在gui中点击的时候就可以调用 translate 方法

var mesh = THREE.SceneUtils.createMultiMaterialObject(geom,materials)//其中materials是设置材料的对象数组

这个方法创建出来的不是一个THREE.Mesh实例,而是materials数组里面的每一个材质都会创建一个实例 所以要像使用Scene对象一样使用这个(THREE.Mesh)

环境光创建后会应用到全局中去,该光源没有特别的来源方向,通常不能将THREE.AmbientLight作为场景中的唯一的光源,因为他会将场景中的所有物体渲染为相同的颜色,在场景中再去引入其他的光源的目的就是弱化阴影。

使用方式:

THREE.PointLight是一种单点发光、照射所有方向的光源,类似于你晚上打开手电筒去照射一个物体的那种场景,THREE.PointLight不会产生阴影,因为它会朝所有的方向发射光线。

属性:

使用方式:

three.js怎么确定背景墙在哪个房间?

在three.js中,可以使用场景(Scene)对象来确定背景墙在哪个房间。场景对象可以用来存储所有场景中的物体,包括背景墙。可以使用场景对象的add方法来添加背景墙,并使用remove方法来移除背景墙。此外,可以使用场景对象的traverse方法来遍历场景中的所有物体,以确定背景墙是否存在于某个房间中。