three.js教程3-模型对象、材质material

1、Object3D的position和scale是三维向量Vector3

因此模型的位置和缩放等变化，也是使用Vector3的属性和方法实现，查询文档Vector3。

三维向量Vector3有xyz三个分量，查看three.js文档你可以知道Vector3对象具有属性.x、.y、.z，Vector3对象还具有.set()等方法。

//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属性改变某个分量的值

（1）平移translate-本质也是修改position

.translateOnAxis ( axis : Vector3, distance : Float ) 

axis -- 一个在局部空间中的标准化向量。

distance -- 将要平移的距离。

在局部空间中沿着一条轴来平移物体，假设轴已被标准化。

.translateX ( distance : Float ) : this 沿着X轴将平移distance个单位。

.translateY ( distance : Float ) : this 沿着Y轴将平移distance个单位。

.translateZ ( distance : Float ) : this 沿着Z轴将平移distance个单位。

（2）缩放scale

属性.scale表示模型对象的xyz三个方向上的缩放比例，默认值是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)

 

2、object3D的rotation属性是欧拉Euler-弧度

模型的角度属性.rotation和四元数属性.quaternion都是表示模型的角度状态，只是表示方法不同，.rotation属性值是欧拉对象Euler,.quaternion属性值是是四元数对象Quaternion

Euler有xyz三个分量，查看three.js文档你可以知道Euler对象具有属性.x、.y、.z、.order，Euler对象还具有.set()等方法。

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

Euler.set(0,0, Math.PI/2)

（1）旋转rotate

.rotateOnAxis ( axis : Vector3, angle : Float ) : this
axis —— 一个在局部空间中的标准化向量。
angle —— 角度，以弧度来表示。
在局部空间中绕着该物体的轴来旋转一个物体，假设这个轴已被标准化。

.rotateX ( rad : Float ) : this
.rotateY ( rad : Float ) : this
.rotateZ ( rad : Float ) : this

 

3、材质的颜色属性是Color对象

//构造函数
const color1 = new THREE.Color();//默认白色
const color2 = new THREE.Color( 0xff0000 );
const color2 = new THREE.Color( '#00ff00');
const color3 = new THREE.Color('rgb(255, 0, 0)');
const color7 = new THREE.Color( 1, 0, 0 );

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

//通用方法set()
material.color.set(0x00ff00);//十六进制方式设置颜色
material.color.set('#00ff00');//前端CSS颜色值设置颜色
material.color.set('rgb(0,255,0)');

4、模型材质父类Material

（1）材质半透明设置

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

（2）side属性

material.side = THREE.FrontSide;//前面可以看到，0
material.side = THREE.BackSide;//背面可以看到,1
material.side = THREE.DoubleSide;//双面可见,2

 

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

（1）克隆.clone()-返回一个新对象

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

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

注意：通过克隆.clone()获得的新模型和原来的模型共享材质和几何体。

（2）复制-obj2.copy(obj1)

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

const obj1 = new THREE.Vector3(1, 2, 3);
const obj2 = new THREE.Vector3(4, 5, 6);
//读取boj1的赋值给obj2
obj2.copy(obj1);

 

 

 文章中部分素材选取自Threejs中文网：http://www.webgl3d.cn/