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

场景中的三要素

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)

如果你是指给场景设置背景，直接load个texture（可以是普通的texture，也可以是天空盒子那样的cubetexture），然后scene.background=texture

我说一下我的实现场景。

1.引入了一个obj的模型（引入相应的loader.js。我这里用的MTL,OBJ,DDSloader）

THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() )

    var mtlLoader = new THREE.MTLLoader()

    mtlLoader.load('model/gaoda/file.mtl',function(materials){

materials.preload()

var loader = new THREE.OBJLoader()

loader.setMaterials(materials)

loader.load( 'model/gaoda/file.obj', function ( obj ) {

  _this.cube = obj

  _this.cube.position.set(0,1,0)

  _this.scene.add( _this.cube )

}, onProgress, onError )

})

2.在three的raysects为模型添加事件

var raycaster = new THREE.Raycaster()

var mouse = new THREE.Vector2()

mouse.x = ( event.clientX / window.innerWidth )*2 - 1

mouse.y = -( event.clientY / window.innerHeight )*2 + 1

raycaster.setFromCamera( mouse, _this.camera )

var intersects = raycaster.intersectObjects( _this.cube.children )

_this.initMessage(intersects,event.clientX,event.clientY)

3.最后监听该点击事件就行了。

 window.addEventListener('click',this.clickModel,false)

效果图如下:

我也是才开始学习THREE。希望能帮助到你。

---