开启Web 3D可视化之旅：用Three.js绘制多边形并更新顶点

2024-01-08 16:30:48

解锁Web 3D图形的秘诀：使用Three.js绘制和动态更新多边形

Three.js简介

想象一下，在网页上呈现令人惊叹的3D图形，这不再是梦想。Three.js，一个基于WebGL的JavaScript库，将成为你的得力助手，让3D可视化成为可能。Three.js功能强大，可以轻松创建和渲染复杂的3D场景和动画，让你在Web上尽情挥洒创意。

绘制多边形

从一个简单的六边形开始吧！首先，你需要定义顶点坐标。有了坐标，就可以使用Three.js的Geometry类创建一个几何体。接下来，选择合适的材质，并通过Three.js的Mesh类将它应用到几何体上。最后，用Three.js的WebGLRenderer将场景渲染到HTML元素中。

// 创建一个六边形几何体
const geometry = new THREE.Geometry();
geometry.vertices.push(
  new THREE.Vector3(-1, -1, 0),
  new THREE.Vector3(1, -1, 0),
  new THREE.Vector3(1, 1, 0),
  new THREE.Vector3(-1, 1, 0),
  new THREE.Vector3(-1, -1, 0)
);
geometry.faces.push(new THREE.Face3(0, 1, 2));
geometry.faces.push(new THREE.Face3(0, 2, 3));

// 创建一个网格对象
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);

// 渲染场景
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

更新顶点

让多边形动起来吧！Three.js提供了多种方法来更新顶点。一种简便的方法是通过Geometry类的vertices属性。只需使用vertices[i].set()方法，就可以轻松修改顶点坐标。

// 更新顶点坐标
geometry.vertices[0].x += 0.01;
geometry.vertices[0].y += 0.01;

使用缓冲几何

除了Geometry类，你还可以使用缓冲几何BufferGeometry来创建几何体。BufferGeometry在性能方面更胜一筹，尤其适用于大量顶点或频繁更新顶点的情况。在使用BufferGeometry时，同样可以通过vertices属性更新顶点。

// 创建一个缓冲几何六边形
const bufferGeometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
  -1, -1, 0,
  1, -1, 0,
  1, 1, 0,
  -1, 1, 0,
  -1, -1, 0
]);
bufferGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));