threejs（三）模型对象、材质
一、三维向量Vector3与模型位置
模型对象的父类 Object3D
点模型Point、线模型Line、网格模型Mesh等模型对象的父类都是Object3d，一些模型的基本属性、操作可以去Object3D 中去找。
三维向量 Vector3
Vector3
1、简单复习一哈数学里面的向量知识：
向量是一个有大小、方向的量，是一个有向线段；
空间向量(x,y,z)，其中x,y,z分别是三轴上的坐标，模长是：
平面向量（x，y），模长是：
2、Vector3的意义
threejs会用单位向量 Vector3 表示很多数据，比如.position设置三维物品的位置属性、.scale缩放、translateX()平移，都是用 Vector3 向量做操作。
3、.postion
mesh.position.set(80,2,10);
4、平移 .translateX()、.translateY()
mesh.translateX(100) // *沿x的正方向平移 100
沿着自定义方向移动，这里就用了 Vector3 单位向量
//向量Vector3对象表示方向
const axis = new THREE.Vector3(1, 1, 1);
axis.normalize(); //向量归一化
//沿着axis轴表示方向平移100
mesh.translateOnAxis(axis, 100);
5、.scale
属性.scale表示模型对象的xyz三个方向上的缩放比例，.scale的属性值是一个三维向量对象Vector3,默认值是THREE.Vector3(1.0,1.0,1.0)。
x轴方向放大2倍
mesh.scale.x = 2.0;
网格模型xyz方向分别缩放0.5,1.5,2倍
mesh.scale.set(0.5, 1.5, 2)
二、欧拉Euler与角度属性.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;
三、材质颜色Color对象
1、颜色对象Color
查看颜色对象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);
2、通过.r、.g、.b属性改变颜色值
color.r = 0.0;
color.b = 0.0;
3、改变颜色的方法
查看Color文档，可以看到Color提供了.setHex()、.setRGB()、.setStyle()、.set()等修改颜色值的方法。
color.setRGB(0,1,0);//RGB方式设置颜色
color.setHex(0x00ff00);//十六进制方式设置颜色
color.setStyle('#00ff00');//前端CSS颜色值设置颜色
.setHex()、.setStyle()风格的颜色值都可以作为.set()的参数color.set(0x00ff00);//十六进制方式设置颜色
color.set('#00ff00');//前端CSS颜色值设置颜色
4、重置模型材质的颜色
十六进制颜色
material.color.set(0x00ffff);
前端CSS风格颜色值：‘#00ff00’、'rgb(0,255,0)'等形式
material.color.set('#00ff00');
material.color.set('rgb(0,255,0)');
四、材质Material对象
MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial等子类网格材质会从父类Material继承一些属性和方法，比如透明度属性.opacity、面属性.side、是否透明属性.transparent等等。
五、克隆.clone()和复制.copy()
克隆.clone()、复制.copy()是threejs很多对象都具有的方法，比如三维向量对象Vector3、网格模型Mesh、几何体、材质。
clone：复制对象；
copy：复制属性值
1、克隆.clone()
克隆.clone()简单说就是复制一个和原对象一样的新对象,下面以三维向量对象Vector3给大家举例，其他的threejs对象都可以参照类似的写法。
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);
2、复制.copy()
复制.copy()简单说就是把一个对象属性的属性值赋值给另一个对象,下面以三维向量对象Vector3给大家举例，其他的threejs对象都可以参照类似的写法。
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克隆.clone()
通过mesh克隆.clone()一个和mesh一样的新模型对象mesh2。
const mesh2 = mesh.clone();
mesh2.position.x = 100;
通过克隆.clone()获得的新模型和原来的模型共享材质和几何体
// 改变材质颜色，或者说改变mesh2颜色，mesh和mesh2颜色都会改变
// material.color.set(0xffff00);
mesh2.material.color.set(0xffff00);
3、示例
（1）几何体geometry和材质material克隆.clone()
const mesh2 = mesh.clone();
// 克隆几何体和材质，重新设置mesh2的材质和几何体属性
mesh2.geometry = mesh.geometry.clone();
mesh2.material = mesh.material.clone();
// 改变mesh2颜色，不会改变mesh的颜色
mesh2.material.color.set(0xff0000);
（2）练习：mesh.position.copy()
改变mesh的位置，使之位于mesh2的正上方(y)，距离100。
mesh.position.copy(mesh2.position);//1. 第1步位置重合
mesh.position.y += 100;//1. 第2步mesh在原来y的基础上增加100
（3）练习：mesh.rotation.copy()
两个模型的姿态角度始终保持一样。
// 渲染循环
function render() {mesh.rotateY(0.01);// mesh旋转动画// 同步mesh2和mesh的姿态角度一样，不管mesh姿态角度怎么变化，mesh2始终保持同步mesh2.rotation.copy(mesh.rotation);renderer.render(scene, camera);requestAnimationFrame(render);
}
render();