three.js - Transform objects

关于物体位移、旋转、缩放等属性可参考此文档 Object3D

• position

  • position is not just an object,position inherit from Vector3
  • mesh.position.length() 计算从（0,0,0）到（x,y,z）的欧几里得长度，即直线长度
  • mesh.position.distanceTo(vector3)计算向量之间的距离，接收一个三维向量
  • mesh.position.normalize()转换为单位向量

// Cube
const geometry = new THREE.BoxGeometry(1,1,1) // 1表示一个单位
const material = new THREE.MeshBasicMaterial({
  color: '#ff0000'
})
const mesh = new THREE.Mesh(geometry, material)

// 修改position写法1：
mesh.position.x = 0.7
mesh.position.y = -0.6
mesh.position.z = 8

// 修改position写法2：
// mesh.position.set(0.7,-0.6,8)

scene.add(mesh)

// 4. mesh.position.normalize() // 转换为单位向量

// 1. 场景中心（0,0,0）和物体之间的距离
// normalize后场景中心与物体间的距离为1
console.log(mesh.position.length())

// 2. 物体至某向量之间的距离，distanceTo方法接受一个三维向量
console.log(mesh.position.distanceTo(new THREE.Vector3(0.7,-0.6,8)))

// Sizes
const sizes = {
  width: 800,
  height: 600
}

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height) 
camera.position.set(0, 0, 10)
scene.add(camera) 

// 3. 物体与camera之间的距离
console.log(mesh.position.distanceTo(camera.position))

• position - 父子元素

  • position属性表示对象的局部位置
  • 几何体直接add进场景时，几何体坐标（也就是几何体位置）是直接参照世界坐标系的，但当一个几何体被add到另一个几何体时（父几何体），几何体位置则相对这个父几何体
  • 以下代码的结果是：子几何体位于原点坐标位置

  // 创建几何体（父子共用）
  const geometry = new THREE.BoxGeometry(1, 1, 1) 

  // 子几何体
  const material = new THREE.MeshBasicMaterial({ 
    color: 0x00ff00
  })
  const cube = new THREE.Mesh(geometry, material) 
  cube.position.x = 3 // 修改子几何体位置

  // 父几何体
  const parentMaterial = new THREE.MeshBasicMaterial({ 
    color: 0xff0000
  })
  const parentCube = new THREE.Mesh(geometry, parentMaterial)
  parentCube.add(cube) // 将几何体添加进父几何体
  parentCube.position.set(-3, 0 ,0) // 修改父几何体位置
  
  // 将父几何体添加进场景
  scene.add(parentCube) 

• 坐标轴及方向 the direction of each axis is arbitrary,in three.js,we consider:

  • y axis is going upward,green
  • z axis is going backward,blue
  • x axis is going to the right,red

// Axes helper
const axesHelper = new THREE.AxesHelper(6) // 坐标轴线段长度
scene.add(axesHelper)

• scale

  • the default value of each axis is 1

// 修改scale写法1：
// mesh.scale.x = 1.4
// mesh.scale.y = 0.5
// mesh.scale.z = 2

// 修改scale写法2：
mesh.scale.set(1.4, 0.5, 2)

• scale - 父子元素

  • scale属性表示对象的局部缩放
  • 父几何体的缩放会影响子几何体，假设父几何体放大2倍，意味着子几何体也会放大2倍；
  • 以下代码结果是： 子几何体放大4倍

cube.scale.set(2, 2, 2) // 子几何体
parentCube.scale.set(2, 2, 2) // 父几何体

• rotate

  • with rotation or quaternion,互相绑定
  • rotation has x,y and z properties, but it's a Euler
  • when you change the x,y and z properties,you can imagine putting a stick througth your object's center in the axis's direction and then rotating object on that stick
  • when you rotate on an axis,you might also rotate other axis,例如当在x轴旋转一定角度后，此时的y轴已经变化了
  • 万向节锁：the rotation gose by default in the x,y and z order and you can get strange result like an axis not working anymore ,this is called gimbal lock; 变更旋转顺序：you can change the order by using the object.rotation.reorder('YZX'),do it before changing the rotation

// 默认旋转顺序：XYZ

// 修改rotation写法1：
// mesh.rotation.reorder('YXZ')
// mesh.rotation.x = Math.PI / 4
// mesh.rotation.y = Math.PI / 4

// 修改rotation写法2：
mesh.rotation.set(Math.PI / 4, Math.PI / 4, 0, 'YXZ')

• rotate - 父子元素

  • rotation属性表示物体局部旋转
  • 以下代码表示，分别设置父元素旋转45°，子元素旋转45°，实际呈现的结果是子元素旋转了90°

  cube.rotation.x = Math.PI / 4 // 子元素
  parentCube.rotation.x = Math.PI / 4 // 父元素

• lookAt()

  • 相机焦点方向，相机看向某个坐标，接受一个三维变量

camera.lookAt(mesh.position) // 相机看向物体
// camera.lookAt(new THREE.Vector3(0,1,0))

• scene graph

  • you can put objects inside groups and use position,rotation and scale on those groups
  • 删除原先cube以及scle,rotation,position的部分

import * as THREE from "three"

// Scene
const scene = new THREE.Scene()

// group
const group = new THREE.Group()
group.position.y = 1
group.scale.x = 2
group.rotation.x = Math.PI / 4
scene.add(group)

const cube1 = new THREE.Mesh(
  new THREE.BoxGeometry(1,1,1),
  new THREE.MeshBasicMaterial({color: '#ff0000'})
)
cube1.position.x = 4

group.add(cube1)

const cube2 = new THREE.Mesh(
  new THREE.BoxGeometry(1,1,1),
  new THREE.MeshBasicMaterial({color: '#00ff00'})
)
cube2.position.set(0,4,0)

group.add(cube2)

const cube3 = new THREE.Mesh(
  new THREE.BoxGeometry(1,1,1),
  new THREE.MeshBasicMaterial({color: '#0000ff'})
)
cube3.position.set(0,0,4)

group.add(cube3)

// Axes helper
const axesHelper = new THREE.AxesHelper(6) // 坐标轴长度
scene.add(axesHelper)

// Sizes
const sizes = {
  width: 800,
  height: 600
}

// Camera
// 垂直视野，纵横比
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height) 
// 修改camera位置，默认所有东西都在场景中心，也就是修改位置前camera位于立方体的内部中心
camera.position.set(2, 2, 10)
// camera.lookAt(mesh.position)
// camera.lookAt(new THREE.Vector3(3,0,0))
scene.add(camera) 

// 物体与camera之间的距离
// console.log(mesh.position.distanceTo(camera.position))

// Render
const renderer = new THREE.WebGLRenderer({})
renderer.setSize(sizes.width, sizes.height)
document.body.appendChild(renderer.domElement)
renderer.render(scene, camera)