三、threejs 学习笔记-模型对象和材质

友情链接:threejs 中文文档

目录

1. 欧拉Euler与角度属性.rotation

(1) 欧拉对象Euler

 (2) 改变角度属性.rotation

(3) 旋转方法.rotateX()、.rotateY()、.rotateZ()

2. 模型颜色对象

(1) 颜色对象Color

(2) 改变颜色的方法

3. 模型材质父类Material

(1) 材质父类Material

(2) 网格材质继承父类属性

4. 克隆clone()与复制copy()

(1) 克隆.clone()

(2) 复制.copy()

(3)  克隆.clone()

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的材质同样道理。 MeshBasicMaterialMeshLambertMaterialMeshPhongMaterial等子类网格材质会从父类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中文网

猜你喜欢

转载自blog.csdn.net/weixin_60645637/article/details/131487456