友情链接:threejs 中文文档
目录
(3) 旋转方法.rotateX()、.rotateY()、.rotateZ()
1. 欧拉Euler与角度属性.rotation
模型的角度属性rotation和quaternion都是表示模型角度的状态,只是表达方法不同,rotation属性的值是欧拉对象Euler,而quaternion属性的值是四元数对象Quaternion。
(1) 欧拉对象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;
(2) 改变角度属性.rotation
角度属性.rotation的值是欧拉对象Euler,意味着你想改变属性.rotation,可以查询文档关于Euler类的介绍。
(3) 旋转方法.rotateX()、.rotateY()、.rotateZ()
模型执行.rotateX()、.rotateY()等旋转方法,你会发现改变了模型的角度属性.rotation。
mesh.rotateX(Math.PI/4);//绕x轴旋转π/4
//控制台查看:旋转方法,改变了rotation属性
console.log(mesh.rotation);
(4) 绕某个轴旋转
const axis = new THREE.Vector3(0,1,0);//向量axis
mesh.rotateOnAxis(axis,Math.PI/8);//绕axis轴旋转π/8
2. 模型颜色对象
(1) 颜色对象Color
查看颜色对象Color文档,可以看到颜色对象有三个属性,分别为.r、.g、.b,表示颜色RGB的三个分量。
// 创建一个颜色对象
const color = new THREE.Color();//默认是纯白色0xffffff。
console.log('查看颜色对象结构',color);//可以查看rgb的值
// Color对象也可以通过r、g、b属性改变颜色值
color.r = 0.0;
color.b = 0.0;
(2) 改变颜色的方法
查看官网的Color,可以看到Color提供了.setHex()、.setRGB()、.setStyle()、.set()等修改颜色值的方法。
color.setRGB(0,1,0);//RGB方式设置颜色
color.setHex(0x00ff00);//十六进制方式设置颜色
color.setStyle('#00ff00');//前端CSS颜色值设置颜色
color.set(0x00ff00);//十六进制方式设置颜色
color.set('#00ff00');//前端CSS颜色值设置颜色
3. 模型材质父类Material
(1) 材质父类Material
查询threejs文档,你可以看到基础网格材质MeshBasicMaterial、漫反射网格材质MeshLambertMaterial、高光网格材质MeshPhongMaterial等网格材质都有一个共同的父类Material。
(2) 网格材质继承父类属性
从JavaScript语法角度看子类都会继承父类的属性和方法,threejs的材质同样道理。 MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial等子类网格材质会从父类Material继承一些属性和方法,比如透明度属性.opacity、面属性.side、是否透明属性.transparent等等。
material.transparent = true;//开启透明
material.opacity = 0.5;//设置透明度
material.side = THREE.BackSide;//背面可以看到
material.side = THREE.DoubleSide;//双面可见
4. 克隆clone()与复制copy()
克隆.clone()、复制.copy()是threejs很多对象都具有的方法,比如三维向量对象Vector3、网格模型Mesh、几何体、材质。
(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);
(3) 克隆.clone()
通过克隆.clone()一个一样的新模型对象。
const mesh2 = mesh.clone();
mesh2.position.x = 100;
.clone()方法会创建一个与原始对象完全相同的新对象,包括其属性和方法。.copy()方法也会创建一个新对象,但它只复制原始对象的属性,而不包括其方法。
因此,.clone()方法更适合创建独立的对象实例,而.copy()方法更适合创建基于现有对象的变体。
文章中部分素材选取自Threejs中文网:Three.js中文网