模型对象、材质

三维向量 Vector3 与模型位置、缩放属性、向量归一化

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

三维向量 Vector3：Vector3(x,y,z)：x 轴、y 轴、z 轴

import * as THREE from "three";

const geometry = new THREE.BoxGeometry(50, 50, 50);
const meterial = new THREE.MeshBasicMaterial({
	color: 0x00ff00,
	transparent: true,
	opacity: 0.5,
});
const mesh = new THREE.Mesh(geometry, meterial);

// 创建一个三维向量对象Vector3
const v3 = new THREE.Vector3(100, 100, 100);
console.log("v3.x：", v3.x);

// .set(x,y,z)，重新设置x、y、z的值
v3.set(200, 200, 200);
console.log("v3.x：", v3.x);

// 修改mesh的position
mesh.position.set(100, 0, 0);

// 缩放
mesh.scale.set(2, 10, 2);

// 向量归一化：就是等比例缩放向量的xyz三个分量，缩放到向量长度.length()为1。
const v = new THREE.Vector3(3, 1, 1);
console.log("v.length:", v.length());
v.normalize();
console.log("v.x：", v.x);
console.log("v.length", v.length());

// 归一化计算
const dir = new THREE.Vector3(1, 1, 0);
const L = dir.length();
// 归一化：三个分量分别除以向量长度
dir.x = dir.x / L;
dir.y = dir.y / L;
dir.z = dir.z / L;
//Vector3(√2/2, √2/2, 0)   Vector3(0.707, 0.707, 0)
console.log("dir", dir);

// 将物体沿着某个特定轴线旋转
mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI / 4);

export default mesh;

欧拉 Euler 与角度属性

模型的 rotation 属性和.quaternion 属性都是表示模型的角度状态，只是 rotation 属性为欧拉对象 Euler，quaternion 属性为四元数对象 Quaternion。

/* 创建一个欧拉对象 */
const eu = new THREE.Euler(0, Math.PI, 0);
eu.x = Math.PI / 4;
console.log("eu：", eu);
mesh.rotation.x = Math.PI / 4; // rotation是一个Eular对象
mesh.rotateX(Math.PI / 8); // 旋转

export default mesh;

模型材质颜色

.color 属性：设置材质颜色

/* 创建一个颜色对象 */
const color = new THREE.Color();
// 方法一
color.set(0xff0000); // 融合了所有颜色修改方法
// 方法二
color.r = 1;
color.g = 0;
color.b = 1;
console.log("color：", color);

// 修改mesh颜色
mesh.material.color.set(color);

// 颜色相关
mesh.material.color.setRGB(1, 0, 0);

// setStyle()：使用前端方式
mesh.material.color.setStyle("#fff");

.copy()和.clone()

threejs 中很多对象都具有 copy()和 clone()方法，用于复制对象，类似于三维向量 Vector3、网格模型 Mesh、几何体、材质等。

克隆 clone()

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

const v1 = new THREE.Vector3(1, 2, 3);
console.log("v1", v1);

const v2 = v1.clone();
console.log("v2", v2);


// 创建球1、球2
const boxGeometry = new THREE.BoxGeometry(10, 10, 10);
const boxMaterial = new THREE.MeshBasicMaterial({
    color: 0x00ff00
});

const box1 = new THREE.Mesh(boxGeometry, boxMaterial);
const box2 = box1.clone();  // 克隆获取的新模型和原来的模型共享材质和几何体

// 修改box1的位置，会影响box2。原因：box1和box2共用一个boxGeometry，针对box1.getmetry设置会直接改变公用的geometry
box1.geometry.translate(100, 0, 0)

export { box1, box2 };

复制 copy()

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

const v1 = new THREE.Vector3(1, 2, 3);
console.log("v1", v1);

const v2 = new THREE.Vector3(4, 5, 6);
v2.copy(v1);
console.log("v2", v2);