Cheng

Appearance

模型对象材质 ​

三维向量 Vector3 和模型位置 ​

位置属性 position 的输出就是三维向量, 默认值(0,0,0)

改变位置属性 ​

  • 设置 y 坐标 mesh.position.y=20
  • 设置 xyz 坐标 mesh.position.set(20,40,60)

平移 ​

  • 基础平移

    js
    mesh.translateX(50);
mesh.translateY(-100);

  • 沿自定义方向平移

    js
    const v3 = new THREE.Vector3(1, 1, 1);
v3.normalize(); //向量归一化
mesh.translateOnAxis(axis, 100);

缩放 ​

  • 单方向放大: mesh.scale.x = 2
  • 各个方向缩放: mesh.scale.set(0.5, 1.5, 2)

欧拉(Euler)与角度属性 ​

角度属性的值就是欧拉对象 Euler

改变角度属性 ​

js
// 绕Y轴旋转增加60度
mesh.rotation.y += Math.PI / 3;
// 绕Y轴旋转减去60度
mesh.rotation.y -= Math.PI / 3;

旋转方法 ​

rotateX, rotateY, rotateZ

js
mesh.rotateX(Math.PI / 3);

旋转动画 ​

js
function render() {
  //   mesh.rotation.y += 0.01;
  mesh.rotateY(Math.PI / 3);
  requestAnimationFrame(render);
}

绕某个轴旋转 ​

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

模型材质颜色 ​

颜色对象 ​

js
// 创建颜色对象
const color = new THREE.Color();
color.setRGB(0, 1, 0);
color.setHex(0x00ff00);
color.setStyle("#00ff00");
// 十六进制和style都可以作为set参数, 效果相同
color.set();

模型颜色 ​

js
material.color.set(0x00ffff);
material.color.set("#00ff00");
material.color.set("rgb(0,255,0)");

模型材质父类 Material ​

透明度设置 ​

js
material.transparent = true; //开启透明度
material.opicaty = 0.5; //透明度设置

材质面属性 ​

默认是FrontSide, 正面可见

js
material.side = THREE.BackSide; //背面可见
material.side = THREE.DoubleSide; //双面可见

模型材质和几何体属性 ​

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

// 改变模型材质
mesh.material.color.set(0x00ffff);
// 改变模型几何体
mesh.geometry.translate(100, 20, 0);

材质或几何体共享 ​

js
const mesh1 = new THREE.Mesh(geometry, material);
const mesh2 = new THREE.Mesh(geometry, material);

// 共享同一个geometry, material; 改变其中一个, 另一个也跟着改变
mesh2.geometry.translate(100, 20, 0);
mesh2.material.color.set(0x00ffff);

克隆 clone(), 复制 copy() ​

克隆.clone() ​

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

js
const v1 = new THREE.Vector3(1, 2, 3);
//v2是一个新的Vector3对象，和v1的.x、.y、.z属性值一样
const v2 = v1.clone();

复制.copy() ​

把一个对象属性复值给另一个对象

js
const v1 = new THREE.Vector3(1, 2, 3);
const v3 = new THREE.Vector3(4, 5, 6);
v3.copy(v1);

Mesh 克隆 ​

js
const mesh2 = mesh.clone();
// 共享几何体和材质属性, 修改mesh2, mesh也会改变
mesh2.material.color.set(0x00ffff);

几何体和材质单独克隆 ​

js
const mesh2 = mesh.clone();
// 重新克隆mesh2的几何体和材质属性
mesh2.material = mesh.material.clone();
mesh2.geometry = mesh.geometry.clone();
// 修改mesh2属性, mesh不会跟着改变
mesh2.material.color.set(0x00ffff);