关于粒子组成正方体

来源：16-3 粒子组合成立方体

weixin_慕少0149431

2023-03-17

新版本的使用 points来创建的里面没有vertices 这个属性使用的 BufferGeometry,粒子是有了这个动画改怎么实现啊

写回答

3回答

yancy

2023-03-20

已采纳

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.150.1/three.min.js"></script>
  <script src="../lib/three/tween.min.js"></script>
</head>
<body>

</body>
</html>
<script type="module">
  const clock = new THREE.Clock()
  // 创建一个场景
  const scene = new THREE.Scene();

  // 创建一个相机 视点
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  // 设置相机的位置
  camera.position.set(0,30,100);
  camera.lookAt(new THREE.Vector3(0,0,0));

  // 创建一个渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

  // 创建一个立方体
  const geometry = new THREE.BoxGeometry(10, 10, 10, 10, 10, 10);

  function getSprite() {
    const canvas = document.createElement('canvas')
    const size = 8
    canvas.width = size * 2;
    canvas.height = size * 2;

    const c = canvas.getContext('2d')

    const gradient = c.createRadialGradient(size, size, 0, size, size, size);
    gradient.addColorStop(0.1, 'rgba(0,255,255,1)')

    c.fillStyle = gradient;
    c.arc(size, size, size / 2, 0, Math.PI * 2);
    c.fill();

    const texture = new THREE.Texture(canvas)
    texture.needsUpdate = true;
    return texture;
  }

  // 存储原始坐标
  const indexList = [];

  // 设定当前随机的范围
  const range = 100;

  function createPointCloud() {
    const arr = geometry.attributes.position.array
    for (let i = 0; i <  arr.length/3 ; i++) {
      const i3 = i * 3
      indexList.push({
        x: arr[i3],
        y: arr[i3+1],
        z: arr[i3+2],
      })

      arr[i3] = Math.random() * range - range / 2;
      arr[i3+1] = Math.random() * range - range / 2;
      arr[i3+2] = Math.random() * range - range / 2;

      const material = new THREE.SpriteMaterial({
        map: getSprite(),
      })
      const sprite = new THREE.Sprite(material);
      sprite.position.set(arr[i3], arr[i3+1], arr[i3+2]);
      sprite.scale.set(1,1,1);
      scene.add(sprite);
    }

    setTimeout(() => {
      for (let i = 0; i < scene.children.length; i++) {
        new TWEEN.Tween(scene.children[i].position).to(indexList[i], 2000).start();
      }
    }, 4000)
  }

  createPointCloud()

  const animation = () => {
    scene.rotation.y += 0.01;
    // 渲染
    renderer.render(scene, camera);
    TWEEN.update();

    requestAnimationFrame(animation);
  }
  animation()
</script>

weixin_慕少0149431

感谢老师

2023-03-20

共1条回复

yancy

2023-03-20

可以使用创建的单个粒子的方式来实现动画

weixin_慕少0149431

是根据buffergeometry来创建粒子，然后for循环设置位置是吧

2023-03-20

共1条回复

yancy