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轴表示方向平移1002.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() 需要一个已经存在的目标对象来接收属性。