three.js中的5种网格对象

在 Three.js 中，网格对象是用于表示三维模型的基本对象。它是由一个几何体和材质组成的，可以在场景中进行渲染。下面是一些常见的网格对象：

Mesh

Mesh 是 Three.js 中最基本的网格对象，它包含一个几何体和一个材质。几何体表示网格的形状，材质表示网格的表面属性，可以是颜色、贴图、透明度等。以下代码展示了如何创建一个基本的网格对象：

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);

SkinnedMesh

SkinnedMesh 是一种包含三维模型和骨骼动画的网格对象。它适用于需要对三维模型进行动画操作的场景，如人物模型。以下代码展示了如何创建一个 SkinnedMesh：

const geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
const material = new THREE.MeshBasicMaterial( { color: 0xffffff, skinning: true } );
const mesh = new THREE.SkinnedMesh( geometry, material );

InstancedMesh

InstancedMesh 是一种可实例化的网格对象，用于创建大量相同几何体但不同材质的模型。这种网格对象可以大幅度提高性能，因为它可以重复使用相同的几何体，而不必创建大量的网格对象。以下代码展示了如何创建一个 InstancedMesh：

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.InstancedMesh(geometry, material, 100);

Line

Line 是一种用于绘制线条的网格对象，它由一系列点组成。该对象不具备表面属性，只有线条的颜色和宽度。以下代码展示了如何创建一个 Line：

const points = [];
points.push( new THREE.Vector3( - 10, 0, 0 ) );
points.push( new THREE.Vector3( 0, 10, 0 ) );
points.push( new THREE.Vector3( 10, 0, 0 ) );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0xffffff } );
const line = new THREE.Line( geometry, material );

LineSegments

LineSegments 和 Line 类似，也是绘制线条的网格对象。不过，LineSegments 可以同时定义多个线条，用于绘制复杂的几何形状。以下代码展示了如何创建一个 LineSegments：

const vertices = [
  new THREE.Vector3(-10, 0, 0),
  new THREE.Vector3(0, 10, 0),
  new THREE.Vector3(10, 0, 0),
  new THREE.Vector3(-10, 0, 0)
];
const geometry = new THREE.BufferGeometry().setFromPoints( vertices );
const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
const lineSegments = new THREE.LineSegments( geometry, material );

这些是常见的几种网格对象。当然，在 Three.js 中还有许多其他类型的网格对象，如 PointCloud、Sprite 等，可以根据实际需求选择相应的对象。

three.js中的5种网格对象

three.js[已解决]正交摄影机的变换控件：gizmos缩放问题

three.js多次渲染同一模型（obj模型），FPS要低得多

three.js可缩放场景背景

three.js移动导入的Gltf模型

three.js平面明暗处理的问题

three.js如何渲染立方体材质？

three.js如何创建要在网格中拟合的线段

three.jsGLTFLoader.js这是我的登记簿错误

three.js使用threejs的光流

three.js使用光线投射动态绘制多边形