一、三维向量Vector3与模型位置

三维向量Vector3

三维向量Vector3有xyz三个分量，threejs中很多数据都是通过三维变量vector3来表示的，比如position和scale属性

实例化一个Vector3，可以看到v3对象具有xyz属性和set等方法

位置属性position

模型位置用一个三维向量表示，这意味着，以后想要改变位置属性，可以查看Vector3的文档

改变位置属性，这2种方式效果一样

mesh.position.x = 100

mesh.position.set(100, 0, 0)

平移

translateX、translateY这些方式本质上都是改变模型的position

沿着自定义的方向移动

const axis = new THREE.Vector3(1, 1, 1)
axis.normalize() // 向量归一化
// 沿着axis轴方向平移100
mesh.translateOnAxis(axis, 100)

缩放

2种写法

mesh.scale.x = 2

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

二、欧拉Euler

欧拉角是物体旋转的角度，改变一个物体选择角度的时候，实际上就是改变euler实例的xyz分量

改变角度属性rotation

mesh.rotation.x += Math.PI / 3

模型会绕x轴旋转60度

旋转方法rotateX

mesh.rotateX(60)

和直接设置rotation属性一样，都是改变了模型的角度属性rotation

旋转动画

function render() {
  // model.rotation.x += 0.01
  model.rotateY(0.01)
  renderer.render(scene, camera)
  requestAnimationFrame(render)
}

绕某个轴旋转

const axis = new THREE.Vector3(0, 1, 0)
mesh.rotateOnAxis(axis, Math.PI / 8)

三、模型材质颜色（Color对象）

材质颜色属性

material.color

颜色对象Color

const color = new THREE.Color(0x00ff00)

通过.r .g .b改变颜色值

color.r = 0.1

color.b = 0.8

改变模型颜色的方法

color.setRGB(0, 1, 0) //RGB方式设置颜色
color.setHex(0x00ff00) //十六进制方式设置颜色
color.setStyle('#00ff00') //前端CSS颜色值设置颜色

重置模型的颜色

material.color.set('red')

四、模型材质父类Material

基础网格材质MeshBasicMaterial、漫反射网格材质MeshLambertMaterial、高光网格材质MeshPhongMaterial等网格材质都有一个共同的父类，就是Material

子网格材质会继承Material的属性和方法，比如透明度opacity、面属性side、是否透明transparent

材质半透明属性

  transparent: true,
  opacity: 0.5

材质面属性

material.side = THREE.DoubleSide

材质面属性默认值是THREE.FrontSide，表示网格模型正面可以看到，THREE.BackSide表示背面可以看到，THREE.DoubleSide表示双面可以看到

material.side的值分别是0 1 2，对应正面、背面、双面

五、模型材质和几何体属性

改变模型材质属性

mesh.material.color.set('red')

改变模型几何体属性

mesh.geometry.translate(0, 100, 0) // Y轴平移100

材质和几何体共享

const mesh = new THREE.Mesh(geometry, material)
const mesh1 = new THREE.Mesh(geometry, material)

mesh1.material.color.set('yellow')
mesh1.geometry.translate(100, 0, 0)

通过mesh1改变material和geometry时，mesh会同时生效

改变position只对mesh1生效

mesh1.position.z = 50

六、克隆（clone）和复制（copy）

threejs的很多对象都具有clone和copy方法，比如三维向量对象Vector3、网格模型Mesh、几何体、材质等

克隆

复制一个和原对象一样的新对象

const v1 = new THREE.Vector3(1, 2, 3)
const v2 = v1.clone(v1)

console.log('v1', v1)
console.log('v2', v2)

几何体和材质克隆

const mesh = new THREE.Mesh(geometry, material)
// const mesh1 = new THREE.Mesh(geometry, material)
const mesh1 = mesh.clone() // 和const mesh1 = new THREE.Mesh(geometry, material)效果一样

mesh1.geometry = mesh.geometry.clone()
mesh1.material = mesh.material.clone()

mesh1.material.color.set('red')
mesh1.geometry.translate(0, 100, 0)

geometry和material克隆后，就不会共享了

复制

把一个对象的属性值赋值给另一个对象

const v1 = new THREE.Vector3(1, 2, 3)
const v2 = new THREE.Vector3(4, 5, 6)

v2.copy(v1)
console.log('v1', v1)
console.log('v2', v2)

案例：将mesh的位置挪到mesh1的正上方，距离100

const mesh = new THREE.Mesh(geometry, material)
// const mesh1 = new THREE.Mesh(geometry, material)
const mesh1 = mesh.clone() // 和const mesh1 = new THREE.Mesh(geometry, material)效果一样

mesh1.position.x = 100

mesh.position.copy(mesh1.position)
mesh.position.y += 100

首先将mesh1的位置信息给到mesh，再将mesh1的y坐标向上平移100

案例：2个模型的姿态保持一样

function render() {
  mesh.rotation.x += 0.01
  mesh1.rotation.copy(mesh.rotation)
  renderer.render(scene, camera)
  requestAnimationFrame(render)
}

threejs 模型对象、材质