三、模型对象、材质

更新: 12/19/2025字数: 0 字阅读: 0 分钟

点模型Points、线模型Line、网格网格模型Mesh等模型对象的父类都是Object3D

三维向量Vector3与模型位置.position

三维向量Vector3有xyz三个分量，threejs中会用三维向量Vector3表示很多种数据，例如位置.position和缩放.scale属性。

//new THREE.Vector3()实例化一个三维向量对象
const v3 = new THREE.Vector3(0,0,0);
console.log('v3', v3);
v3.set(10,0,0);//set方法设置向量的值
v3.x = 100;//访问x、y或z属性改变某个分量的值

改变模型位置

mesh.position.y = 80;
// 或者
mesh.position.set(80,2,10);

缩放

mesh.scale.x = 2.0;
// 或者
mesh.scale.set(0.5, 1.5, 2)

沿着自定义的方向移动

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

欧拉Euler与角度属性.rotation

模型的角度属性.rotation的属性值是欧拉对象Euler

// 创建一个欧拉对象，表示绕着xyz轴分别旋转45度，0度，90度
const Euler = new THREE.Euler( Math.PI/4,0, Math.PI/2);

// 也可以通过属性设置欧拉对象的三个分量值。
const Euler = new THREE.Euler();
Euler.x = Math.PI/4;
Euler.y = Math.PI/2;
Euler.z = Math.PI/4;

改变角度

//绕y轴的角度设置为60度
mesh.rotation.y = Math.PI/3;
//绕y轴的角度增加60度
mesh.rotation.y += Math.PI/3;
//绕y轴的角度减去60度
mesh.rotation.y -= Math.PI/3;
// 绕x轴旋转π/4
mesh.rotateX(Math.PI/4);

绕某个轴旋转

const axis = new THREE.Vector3(0,1,0);//向量axis
mesh.rotateOnAxis(axis,Math.PI/3);//绕y轴旋转60度

旋转动画

// 渲染循环
function render() {
    model.rotation.y+=0.01;
    // 或 model.rotateY(0.01);
    requestAnimationFrame(render);
}

克隆.clone()和复制.copy()

克隆.clone()简单说就是复制并实例化一个和原对象一样的新对象

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

复制.copy()简单说就是把一个对象属性的属性值赋值给另一个对象

const v1 = new THREE.Vector3(1, 2, 3);
const v3 = new THREE.Vector3(4, 5, 6);
//读取v1.x、v1.y、v1.z的赋值给v3.x、v3.y、v3.z
v3.copy(v1);

// Mesh克隆
const mesh2 = mesh.clone();
mesh2.position.x = 100;

// 注意：通过克隆.clone()获得的新模型和原来的模型共享材质和几何体
// 改变材质颜色，或者说改变mesh2颜色，mesh和mesh2颜色都会改变
// material.color.set(0xffff00);
mesh2.material.color.set(0xffff00);

// 解决方法：克隆几何体和材质，重新设置mesh2的材质和几何体属性
mesh2.geometry = mesh.geometry.clone();
mesh2.material = mesh.material.clone();
// 改变mesh2颜色，不会改变mesh的颜色
mesh2.material.color.set(0xff0000);