3. threejs study notes-model objects and materials

The angle attributes rotation and quaternion of the model both represent the state of the angle of the model, but the expression methods are different. The value of the rotation attribute is the Euler object Euler, while the value of the quaternion attribute is the quaternion object Quaternion.

(1) Euler object Euler

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

Set the three component values of the Euler object through properties.

const Euler = new THREE.Euler();
Euler.x = Math.PI/4;
Euler.y = Math.PI/2;
Euler.z = Math.PI/4;

(2) Change the angle attribute.rotation

The value of the angle attribute .rotation is the Euler object Euler, which means that if you want to change the attribute .rotation, you can check the documentation for the introduction of the Euler class.

(3) Rotation methods .rotateX(), .rotateY(), .rotateZ()

When the model executes rotation methods such as .rotateX() and .rotateY(), you will find that the angle attribute .rotation of the model has been changed.

mesh.rotateX(Math.PI/4);//绕x轴旋转π/4

//控制台查看：旋转方法，改变了rotation属性
console.log(mesh.rotation);

(4) Rotate around an axis

const axis = new THREE.Vector3(0,1,0);//向量axis
mesh.rotateOnAxis(axis,Math.PI/8);//绕axis轴旋转π/8

2. Model color object

(1) Color object Color

Looking at the color object Color document, you can see that the color object has three attributes, namely .r, .g, and .b, which represent the three components of the color RGB.

// 创建一个颜色对象
const color = new THREE.Color();//默认是纯白色0xffffff。
console.log('查看颜色对象结构',color);//可以查看rgb的值

// Color对象也可以通过r、g、b属性改变颜色值
color.r = 0.0;
color.b = 0.0;

(2) How to change color

Looking at Color on the official website, you can see that Color provides .setHex(), .setRGB(), .setStyle(), .set() and other methods to modify color values.

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

color.set(0x00ff00);//十六进制方式设置颜色
color.set('#00ff00');//前端CSS颜色值设置颜色

3. Model material parent class Material

(1) Material parent class Material

Querying the threejs documentation, you can see that the basic mesh material MeshBasicMaterial, the diffuse mesh material MeshLambertMaterial, the highlight mesh material MeshPhongMaterial and other mesh materials all have a common parent class Material.

(2) The mesh material inherits the properties of the parent class

From the perspective of JavaScript syntax, subclasses will inherit the properties and methods of the parent class, and the same is true for threejs materials. MeshBasicMaterial , MeshLambertMaterial , MeshPhongMaterial and other subclasses of mesh materials will inherit some properties and methods from the parent class Material, such as transparency properties. opacity , surface properties. side , transparent properties. transparent , etc.

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

material.side = THREE.BackSide;//背面可以看到
material.side = THREE.DoubleSide;//双面可见

4. Clone() and copy()

Clone.clone() and copy.copy() are methods that many threejs objects have, such as the three-dimensional vector object Vector3, mesh model Mesh, geometry, and materials.

(1) Clone.clone()

Clone.clone() simply means to copy a new object that is the same as the original object. The following is a three-dimensional vector object Vector3 as an example. Other threejs objects can refer to similar writing methods.

// 克隆
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()

Copy.copy() simply means assigning the attribute value of an object's attribute to another object. The following is a three-dimensional vector object Vector3 as an example. Other threejs objects can refer to similar writing methods.

// 复制
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()

Create an identical new model object by cloning .clone().

const mesh2 = mesh.clone();
mesh2.position.x = 100;

The .clone() method creates a new object that is identical to the original object, including its properties and methods. The .copy() method also creates a new object, but it only copies the original object's properties, not its methods.

Therefore, the .clone() method is more suitable for creating independent object instances, while the .copy() method is better for creating variants based on existing objects.

Some of the materials in the article are selected from Threejs Chinese website: Three.js Chinese website