scene场景

场景是我们每个Three.js项目里面放置内容的容器，我们也可以拥有多个场景进行切换展示，你可以在场景内放置你的模型，灯光和照相机。还可以通过调整场景的位置，让场景内的所有内容都一起跟着调整位置

THREE.Object3D

为了方便操作，Three.js将每个能够直接添加到场景内的对象都继承至一个基类-THREE.Object3D，以后我们将继承至这个基类的对象称为3d对象，判断一个对象是否是继承至THREE.Object3D，我们可以这么判断：obj instanceof THREE.Object3D

向场景内添加一个 3d 对象

scene.add(mesh)

也可以将一个 3d 对象添加到另一个 3d 对象里面

parent.add(child)

获取一个 3d 对象

object3D.name = 'firstObj'
scene.add(object3D)
scene.getObjectByName('firstObj') //返回第一个匹配的3d对象

删除一个 3d 对象

mesh.visible = false // 隐藏
scene.remove(mesh) //将一个模型从场景中删除

修改位置

• 单独设置

mesh.position.x = 3
mesh.position.y += 5
mesh.position.z -= 6

• 一次性设置所有

mesh.position.set(3, 5, -6)

position属性是一个THREE.Vector3三维向量，可以通过赋值的方式重新修改

mesh.position = new THREE.Vector3(3, 5, -6)

修改大小

• 单独设置

mesh.scale.x = 2 //模型沿x轴放大一倍
mesh.scale.y = 0.5 //模型沿y轴缩小一倍
mesh.scale.z = 1 //模型沿z轴保持不变

• 一次性设置所有

mesh.scale.set(2, 2, 2)

scale 属性是一个 THREE.Vector3 三维向量，可以通过赋值的方式重新修改

mesh.scale = new THREE.Vector3(2, 2, 2)

修改转向

• 单独设置

mesh.rotation.x = Math.PI //模型沿x旋转180度
mesh.rotation.y = Math.PI * 2 //模型沿y轴旋转360度
mesh.rotation.z = -Math.PI / 2 //模型沿z轴逆时针旋转90度

• 一次性设置所有

mesh.rotation.set(Math.PI, 0, -Math.PI / 2)

属性是一个THREE.Euler欧拉角对象

mesh.rotation = new THREE.Euler(Math.PI, 0, -Math.PI / 2, 'YZX')

调试插件

gui

1. 引入

<script src="https://cdn.bootcss.com/dat-gui/0.7.1/dat.gui.min.js"></script>

2. 建一个对象，设置需要修改的数据

controls = {
  positionX: 0,
  positionY: 0,
  positionZ: 0,
}

3. 实例化dat.GUI对象，将需要修改的配置添加对象中，并监听变化回调

gui = new dat.GUI()
gui.add(controls, 'positionX', -10, 10).onChange(updatePosition)
gui.add(controls, 'positionY', -10, 10).onChange(updatePosition)
gui.add(controls, 'positionZ', -15, 15).onChange(updatePosition)

function updatePosition() {
  mesh.position.set(controls.positionX, controls.positionY, controls.positionZ)
}