关于粒子组成正方体-慕课网

3回答

yancy 回答被采纳获得+3积分 2023-03-20 15:40:18

<!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>

1 回复有任何疑惑可以回复我~

收起回答

提问者 weixin_慕少0149431 #1
```
感谢老师
```
回复有任何疑惑可以回复我~ 2023-03-20 21:14:29

yancy 2023-03-20 11:43:18

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

0 回复有任何疑惑可以回复我~

收起回答

提问者 weixin_慕少0149431 #1
```
是根据buffergeometry来创建粒子，然后for循环设置位置是吧
```
回复有任何疑惑可以回复我~ 2023-03-20 11:56:26

yancy 2023-03-18 16:49:17

可以贴下代码，看看你的实现方式，然后说下在哪里做修改

0 回复有任何疑惑可以回复我~

收起回答

提问者 weixin_慕少0149431 #1

const arr = geometry.attributes.position.array  
for (let i = 0; i <  arr.length/3 ; i++) {
           const i3 = i * 3
            indexList[i3]=(arr[i3])
            indexList[i3+1]=(arr[i3+1])
            indexList[i3+2]=(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;
     
        tween =  new Tween.Tween(arr.length)
        tween.to({
          [i * 3]: indexList[i * 3],
          [i * 3 + 1]: indexList[i * 3 + 1],
          [i * 3 + 2]: indexList[i * 3 + 2]
        }, 2000).start();
  }

回复有任何疑惑可以回复我~ 2023-03-19 20:52:03

提问者 weixin_慕少0149431 #2

const box = new THREE.BoxGeometry(10,10,10,10,10,10)
  
  const couldMetarial = new THREE.PointsMaterial({
    size:2,
    transparent:true,
    map:getSprite()
  })
  could = new THREE.Points(box,couldMetarial)
  could.sortParticles = true;
  scene.add(could)
  console.log(could)
  createPointcould(box);
  const gui = new dat.GUI();
  const onChange = () => {
    scene.remove(could);
    console.log(controls1)
    controls1.showMesh ? createMesh() : createPointcould(box);
  }
  for (const key in controls1) {
    console.log(controls1,key)
    gui.add(controls1, key).onChange(onChange);
  }

回复有任何疑惑可以回复我~ 2023-03-19 20:53:21

关于粒子组成正方体

正在回答

3回答

相似问题

请选择置顶位置

本课精华内容

请问这里使用的什么ui框架

能问下这是为什么吗，图片很奇怪

getPerspective 实现原理

在光墙显示出现，但不会动，提示以下错误

为什么是重新绘制而不是叠加？

热搜

最近搜索清空

关于粒子组成正方体

正在回答

3回答

相似问题

请选择置顶位置

本课精华内容

请问这里使用的什么ui框架

能问下这是为什么吗，图片很奇怪

getPerspective 实现原理

在光墙显示出现，但不会动，提示以下错误

为什么是重新绘制而不是叠加？