Three.js入门（二）——模型对象、材质

三维向量Vector3与模型位置

向量：向量是在数学和物理中常用的概念，它表示具有大小和方向的量。在三维空间中，向量通常用一组有序的数字表示，表示为 (x, y, z)。这些数字分别表示向量在 x、y 和 z 轴上的分量。在计算机图形学和Three.js中，常用的向量表示使用三维向量类，例如 THREE.Vector3。

通过模型位置属性.position可以设置模型在场景Scene中的位置。模型位置.position的默认值是THREE.Vector3(0.0,0.0,0.0)，表示坐标原点。

//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.set(0,0,0);

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

属性.scale表示模型对象的xyz三个方向上的缩放比例，.scale的属性值是一个三维向量对象Vector3,默认值是THREE.Vector3(1.0,1.0,1.0)。

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

欧拉Euler与角度属性.rotation

// 创建一个欧拉对象，表示绕着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;

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

//绕y轴的角度设置为60度
mesh.rotation.y += Math.PI/3;
//绕y轴的角度增加60度
mesh.rotation.y += Math.PI/3;
//绕y轴的角度减去60度
mesh.rotation.y -= Math.PI/3;

mesh.rotateX(Math.PI/4);//绕x轴旋转π/4

// 绕自定义轴旋转
const axis = new THREE.Vector3(0,1,0);//向量axis
mesh.rotateOnAxis(axis,Math.PI/8);//绕axis轴旋转π/8

模型材质颜色(Color对象)

color：threejs材质对象颜色属性.color是threejs的颜色对象Color.颜色对象有三个属性，分别为.r、.g、.b，表示颜色RGB的三个分量

// 创建一个颜色对象
const color = new THREE.Color();//默认是纯白色0xffffff。
console.log('查看颜色对象结构',color);//可以查看rgb的值
// 查看Color对象设置0x00ff00对应的的.r、.g、.b值
const color = new THREE.Color(0x00ff00);


// 通过.r、.g、.b属性改变颜色值
color.r = 0.0;
color.b = 0.0;

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

color.set(0x00ff00);//十六进制方式设置颜色
color.set('#00ff00');//前端CSS颜色值设置颜色

// 重置模型材质的颜色
material.color.set(0x00ffff);

模型材质父类Material

材质半透明设置

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

材质面属性

material.side = THREE.FrontSide;//正面可以看到
material.side = THREE.BackSide;//背面可以看到
material.side = THREE.DoubleSide;//双面可见

模型材质和几何体属性

两个模型共享几何体和材质

const mesh = new THREE.Mesh(geometry, material);
const mesh2 = new THREE.Mesh(geometry, material);
mesh2.position.x = 100;
// 两个mesh共享一个材质，改变一个mesh的颜色，另一个mesh2的颜色也会跟着改变
// mesh.material和mesh2.material都指向同一个material
// 三者等价：mesh.material、mesh2.material、material
mesh.material.color.set(0xffff00);
// 三者等价：mesh.geometry、mesh2.geometry、geometry
mesh.geometry.translate(0,100,0);

 克隆和复制

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

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

// 通过克隆.clone()获得的新模型和原来的模型共享材质和几何体
const mesh2 = mesh.clone();
mesh2.position.x = 100;

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

// 改变mesh位置，使其位于mesh2正上方
mesh.position.copy(mesh2.position);//1. 第1步位置重合
mesh.position.y += 100;//1. 第2步mesh在原来y的基础上增加100

 模型隐藏或显示

mesh.visible =false;// 隐藏一个网格模型，visible的默认值是true
group.visible =false;// 隐藏一个包含多个模型的组对象group

// 隐藏网格模型mesh，visible的默认值是true
mesh.material.visible =false;
// 注意如果mesh2和mesh的.material属性指向同一个材质，mesh2也会跟着mesh隐藏