three.js r153 3d粒子动态生成文字

在 Three.js r153 中，创建 TextGeometry 对象的方式稍有不同，需要使用 FontLoader 加载字体文件。步骤如下：

1. 创建 FontLoader 对象并使用它加载字体文件：

const loader = new THREE.FontLoader();
loader.load('fonts/helvetiker_regular.typeface.json', function (font) {
  // 在回调函数中创建 TextGeometry 对象
  const textGeometry = new THREE.TextGeometry('Hello, World!', {
    font: font,
    size: 50,
    height: 5,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 10,
    bevelSize: 8,
    bevelOffset: 0,
    bevelSegments: 5
  });
  // ...
});

2. 将 TextGeometry 对象转换为 BufferGeometry 对象：

const bufferGeometry = new THREE.BufferGeometry().fromGeometry(textGeometry);

3. 创建 PointsMaterial 对象：

const pointsMaterial = new THREE.PointsMaterial({
  size: 2,
  color: 0xffffff,
  map: particleTexture,
  transparent: true,
  blending: THREE.AdditiveBlending
});

4. 创建 Points 对象并设置其属性：

const points = new THREE.Points(bufferGeometry, pointsMaterial);
points.position.set(-200, 0, 0);

完整的示例代码如下：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 1000);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const particleTexture = new THREE.TextureLoader().load('textures/particle.png');

const loader = new THREE.FontLoader();
loader.load('fonts/helvetiker_regular.typeface.json', function (font) {
  const textGeometry = new THREE.TextGeometry('Hello, World!', {
    font: font,
    size: 50,
    height: 5,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 10,
    bevelSize: 8,
    bevelOffset: 0,
    bevelSegments: 5
  });
  const bufferGeometry = new THREE.BufferGeometry().fromGeometry(textGeometry);

  const pointsMaterial = new THREE.PointsMaterial({
    size: 2,
    color: 0xffffff,
    map: particleTexture,
    transparent: true,
    blending: THREE.AdditiveBlending
  });

  const points = new THREE.Points(bufferGeometry, pointsMaterial);
  points.position.set(-200, 0, 0);

  scene.add(points);
});

function updateParticles() {
  const positions = bufferGeometry.attributes.position.array;
  for (let i = 0; i < positions.length; i += 3) {
    positions[i] += Math.random() * 2 - 1;
    positions[i + 1] += Math.random() * 2 - 1;
    positions[i + 2] += Math.random() * 2 - 1;
  }
  bufferGeometry.attributes.position.needsUpdate = true;
}

function render() {
  updateParticles();
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

render();