在threejs中用缓冲类型几何体随机生成点在一个正方体内漂浮

以下是一个基于缓冲类型几何体的例子，可以在一个正方体内随机生成点并使其漂浮：

var container, camera, scene, renderer, geometry, material, mesh;

init();
animate();

function init() {
  // 创建场景
  scene = new THREE.Scene();
  
  // 创建相机
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 5;
  
  // 创建渲染器
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  // 创建几何体
  var numParticles = 100;
  var positions = new Float32Array(numParticles * 3);
  var colors = new Float32Array(numParticles * 3);
  var sizes = new Float32Array(numParticles);
  
  var color = new THREE.Color();
  var n = 100, n2 = n / 2;
  
  for (var i = 0; i < numParticles; i++) {
    // 随机生成点在正方体内
    var x = Math.random() * n - n2;
    var y = Math.random() * n - n2;
    var z = Math.random() * n - n2;
    
    // 添加点的位置
    positions[i * 3] = x;
    positions[i * 3 + 1] = y;
    positions[i * 3 + 2] = z;
    
    // 添加点的颜色
    color.setHSL(Math.random(), 1.0, 0.5);
    colors[i * 3] = color.r;
    colors[i * 3 + 1] = color.g;
    colors[i * 3 + 2] = color.b;
    
    // 添加点的大小
    sizes[i] = 10;
  }
  
  // 创建材质
  material = new THREE.ShaderMaterial({
    uniforms: {
      amplitude: { value: 1.0 },
      color: { value: new THREE.Color(0xffffff) }
    },
    vertexShader: document.getElementById('vertexshader').textContent,
    fragmentShader: document.getElementById('fragmentshader').textContent,
    blending: THREE.AdditiveBlending,
    depthTest: false,
    transparent: true
  });
  
  // 创建粒子系统
  geometry = new THREE.BufferGeometry();
  geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
  geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
  geometry.addAttribute('size', new THREE.BufferAttribute(sizes, 1));
  
  particles = new THREE.Points(geometry, material);
  scene.add(particles);
  
  // 添加事件监听
  window.addEventListener('resize', onWindowResize, false);
}

function animate() {
  requestAnimationFrame(animate);
  
  // 使粒子漂浮
  var time = Date.now() * 0.001;
  particles.rotation.x = time * 0.25;
  particles.rotation.y = time * 0.5;
  
  renderer.render(scene, camera);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

其中，vertex shader 和 fragment shader 可以根据需要自行编写，这里使用了官方提供的示例代码。需要在 HTML 中添加以下代码：

<script type="x-shader/x-vertex" id="vertexshader">
  attribute float size;
  varying vec3 vColor;
  void main() {
    vColor = color;
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    gl_PointSize = size * (300.0 / length(mvPosition.xyz));
    gl_Position = projectionMatrix * mvPosition;
  }
</script>

<script type="x-shader/x-fragment" id="fragmentshader">
  uniform vec3 color;
  uniform float amplitude;
  varying vec3 vColor;
  void main() {
    gl_FragColor = vec4(color * vColor, 1.0);
    gl_FragColor.a = 0.5 * (1.0 - length(gl_PointCoord - vec2(0.5, 0.5)));
  }
</script>

这个例子中使用的是 ShaderMaterial，可以根据需要使用其他材质。此外，还可以根据需要调整粒子的位置、颜色、大小等属性。