Three.js基础内容(一)

目录

一、几何体顶点和模型

1.1、点模型对象(Points)渲染顶点数据

1.2、线模型(Line)渲染顶点数据（画个心）

1.3、网格模型(Mesh)渲染顶点数据(三角形概念)

1.4、构建一个矩形平面几何体

1.5、几何顶点索引数据

1.6、顶点法线数据

1.7、查看three.js自带几何体顶点结构

1.8、BufferGeometry的旋转、缩放、平移方法

二、三维向量和模型属性

2.1、三维向量Vector3与模型位置、缩放属性

2.2、欧拉Euler与角度属性.rotation

2.3、模型材质颜色(Color对象)

2.4、模型材质和几何体属性

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

一、几何体顶点和模型

已知：缓冲类型几何体(BufferGeometry)是一个没有任何形状的空几何体，用它定义顶点数据。

1.1、点模型对象(Points)渲染顶点数据

1.2、线模型(Line)渲染顶点数据（画个心）

核心代码：7个点连成一个简约心(对称美)

const vertices = new Float32Array([0, 0, 0, -80, 50, 0, -40, 80, 0, 0, 50, 0, 40,80, 0, 80, 50, 0,0, 0, 0,
]);
// 线模型
const material=new THREE.LineBasicMaterial({color:0xffff00
})
const line=new THREE.Line(geometry,material)
const line=new THREE.LineLoop(geometry,material)//闭合线条，自己连接
const line=new THREE.LineSegments(geometry,material)//非连续线条
export default line

注意：

LineLoop：会把所有点连起来，用它画个心就不需要最后再加点(6个点就可以)；

LineSegments：每两个点连成一条线，每根线条之间会断开；

1.3、网格模型(Mesh)渲染顶点数据(三角形概念)

网格模型三角形：正反面

正面：逆时针看

反面：顺时针看

比如下面这个三角形，构成顺序如下图：

此时，正面是逆时针，但是反面是看不到的，因为three.js的材质默认是正面可见，背面不可见。

// 网格模型
const material = new THREE.MeshBasicMaterial({color: 0x00fffff,side: THREE.DoubleSide, //双面可见（DoubleSide）;默认正面可见（FrontSide）;背面可见（BackSide）
});
const mesh = new THREE.Mesh(geometry, material);
export default mesh;

1.4、构建一个矩形平面几何体

几何体其实就是由不同的三角形构成的，比如矩形就是由两个三角形构成的，从一个方向看，这两个三角形都是逆时针或者顺时针。

如下图：

坐标点共6个，其中有两处是重合的，每个三角形的顶点(按顺序)从正面看都是逆时针。

1.5、几何顶点索引数据

根据1.4的案例，我们可以只写4个顶点，通过4个index构成两个三角形。

const vertices = new Float32Array([0, 0, 0,60, 0, 0,60, 60, 0,0,60, 0,
]);
//属性缓冲对象（BufferAttribute）表示顶点数据
const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribute; //设置几何体的顶点位置属性const indexes=new Uint16Array([0,1,2,0,2,3
]);//通过JS的Uint16Array创建顶点索引.index的数据
geometry.index=new THREE.BufferAttribute(indexes,1)

顶点坐标数据是Js的类型化数组Float32Array创建的；

顶点法线数据是Js的类型化数组Float32Array创建的；

顶点索引数据是Js的类型化数组Uint16Array创建的；

1.6、顶点法线数据

法线：垂直于该平面的向量。

因为MeshBasicMaterial不受光照影响，所以上述图形可以正常显示；

但如果使用受光照影响的材质，此时几何体就需要定义顶点法线数据，才能正常显示。

const norlmals=new Float32Array([0, 0, 1,0, 0, 1,0, 0, 1,0, 0, 1,
]);//数量和坐标数量一致
// 定义顶点法线（法向量）数据
geometry.attributes.normal=new THREE.BufferAttribute(norlmals,3)

设置顶点坐标位置：geometry.attributes.position

设置顶点法线位置：geometry.attributes.normal

设置顶点索引位置：geometry.index

1.7、查看three.js自带几何体顶点结构

import * as THREE from "three";
const geometry = new THREE.BoxGeometry(100,100,100); //创建一个长方体
const geometry = new THREE.PlaneGeometry(100,100,2,2); //创建一个矩形平面
const geometry = new THREE.SphereGeometry(50); //创建一个球体console.log(geometry.attributes.position,'.position');
console.log(geometry.index,'.index');// 网格模型
const material = new THREE.MeshBasicMaterial({color: 0x00fffff,wireframe:true
});
const mesh = new THREE.Mesh(geometry, material);
export default mesh;

(1)、材质属性wireframe

线条渲染模式（ wireframe:true），查看几何体三角形结构 。

(2)、几何体细分数

以矩形平面为例：2,2的意思就是将它分别从宽度、高度分为两部分，即4个矩形。

1.8、BufferGeometry的旋转、缩放、平移方法

rotate()、scale()、translate()本质上就是改变顶点数据。

geometry.translate(50,0,0);       //沿X轴平移50

geometry.center();                     //回到原点(即使上面平移了，也会回到原点)

geometry.scale(2,2,2);              //沿XYZ三个方向放大2倍

geometry.rotateX(Math.PI/6);   //沿X轴旋转30度

二、三维向量和模型属性

已知：Points、Line、Mesh等模型对象的父类都是三维物体（Object3D）。

2.1、三维向量Vector3与模型位置、缩放属性

// 创建一个三维向量对象Vector3
const v3 = new THREE.Vector3(100, 100, 100);
v3.set(50, 50, 50);
console.log(v3.x, "v3.x");mesh.position.set(0, 100, 0);
mesh.position.z = 100;mesh.scale.set(2, 2, 2);
mesh.scale.x = 3;mesh.position.x = 100;
mesh.translateX(100);//沿着X轴正方向平移距离100
//等价于mesh.position=mesh.position+100【相对上一次的位置进行平移变换】const axis = new THREE.Vector3(1, 1, 1); //向量Vector3对象表示方向
axis.normalize(); //转化为单位向量（向量归一化）
console.log(axis, "axis");
mesh.translateOnAxis(axis, 100);//沿着axis轴表示方向平移100

2.2、欧拉Euler与角度属性.rotation

模型的角度属性.rotation和四元数属性.quaternion都是表示模型的角度状态

.rotation的属性值是欧拉对象Euler；.quaternion的属性值是四元数对象Quaternion

const mesh = new THREE.Mesh(geometry, material);const eu = new THREE.Euler(Math.PI / 2, Math.PI, 0);
eu.x = Math.PI;mesh.rotation.y = Math.PI / 8;
// mesh.rotation.y += Math.PI / 8;mesh.rotateZ(Math.PI / 4);//绕着Z轴旋转45度
console.log(eu.x, "eu.x", mesh.rotation, "mesh.rotation");

//================================在index.js旋转
function render() {// model.rotateY(0.01);  原来写法，等价于下面model.rotation.y += 0.01;renderer.render(scene, camera); //一定要更新内容requestAnimationFrame(render); //请求动画帧==实现周期性循环
}
render();

2.3、模型材质颜色(Color对象)

const color = new THREE.Color();
color.r = 0;//等价于material.color.r=0
color.b=0
// color.g=1color.setRGB(0,1,0)//RGB方式
color.setStyle('#0000ff')//前端CSS方式（蓝色）
color.setHex(0x00ff00)//十六进制方式
// setStyle()和setHex()也可以直接用.set("颜色值")console.log(color, "color");
//输出 {isColor: true,b: 0,g: 1,r: 0}  等价于color.setRGB(0,1,0)
material.color = color;//此时颜色为绿色

2.4、模型材质和几何体属性

已知：模型材质的父类是Material

const mesh = new THREE.Mesh(geometry, material);
const mesh1 = new THREE.Mesh(geometry, material);
mesh1.position.x = 100;// 两个mesh共享一个材质，改变一个mesh的颜色，另一个mesh的颜色也会改变
mesh.material.color.set(0xffff00)
export { mesh, mesh1 };//========================在index.js中引入=========================
import { mesh, mesh1 } from "./mesh.js";
const scene = new THREE.Scene();
scene.add(mesh, mesh1);

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

const mesh = new THREE.Mesh(geometry, material);
// const mesh1 = new THREE.Mesh(geometry, material);
const mesh1 = mesh.clone(); //等价于上面
mesh1.position.x = 100;// 克隆材质后，改变mesh1的颜色不会改变mesh的颜色
mesh1.material = mesh.material.clone();
mesh1.material.color.set(0xffff00);
// 练习：mesh.position.copy()
mesh.position.copy(mesh1.position); //位置相同
mesh.position.y += 80; //在原来y的基础上增加80
export { mesh, mesh1 };

总结：

1、复制

  深度复制：clone() 方法默认进行深度复制，即复制对象的所有子对象（例如，网格的几何体、材料、变换、Vector3等；

  浅复制：copy() 方法通常进行浅复制，即只复制对象本身的属性，不复制子对象（例如，变换信息（位置、旋转、缩放）或者材料属性等；

2、性能

  因为 clone() 会复制对象及其所有子对象，所以可能会消耗更多的性能和内存；

  因为 copy() 只复制对象的属性，所以通常比 clone() 更高效；

3、目标对象

  clone() 的对象不会继承原始对象的事件监听器或动画状态；

  copy() 需要一个已经存在的目标对象来接收属性。