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

JavaScript08

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)

亲,微信的公众平台域名是mp.weixin.qq.com,至于URL意思就是统一资源定位符URL,统一资源定位符 URL 是对可以从因特网上得到的资源的位置和访问方法的一种简洁的表示。URL 给资源的位置提供一种抽象的识别方法,并用这种方法给资源定位。统一资源定位符只要能够对资源定位,系统就可以对资源进行各种操作,如存取、更新、替换和查找其属性。URL 相当于一个文件名在网络范围的扩展。因此 URL 是与因特网相连的机器上的任何可访问对象的一个指针。在因特网的历史上,统一资源定位符的发明是一个非常基础的步骤。统一资源定位符的语法是一般的,可扩展的,它使用ASCII代码的一部分来表示因特网的地址。一般统一资源定位符的开始标志着一个计算机网络所使用的网络协议。