三.js 简单粒子动画

Question

我正在尝试使用 three.js 重新创建现有的粒子动画 (previous post) 以增加透视和 3d 旋转。这是我第一次使用 three.js，我在如何使用方面遇到了一些问题：

1. 随机散布屏幕上的粒子。
2. 正确（没有黑色背景）将图像纹理应用到粒子。
3. 像我之前的帖子一样应用旋转，但带有一些 3d 触摸。

基本上，我正在尝试使用three.js 重新创建我在canvas 上的上一篇文章中尝试做的事情。

请指点我正确的方向。谢谢你:)

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.z = 10;

var renderer = new THREE.WebGLRenderer({
  antialias: true
});

renderer.setClearColor("#343434");
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

window.addEventListener('resize', () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;

  camera.updateProjectionMatrix();
})

var texture = new THREE.TextureLoader().load('https://i.postimg.cc/rmn0cLmS/confetti.png');

for (i = 0; i < 50; i++) {
  var material = new THREE.MeshLambertMaterial({
    map: texture,
    side: THREE.DoubleSide
  })

  var geometry = new THREE.PlaneGeometry(.5, 1 * .75);
  var mesh = new THREE.Mesh(geometry, material);

  mesh.position.x = (Math.random() * (500 - 1) + 1) * Math.random() < 0.5 ? -1 : 1;
  mesh.position.y = (Math.random() * (window.innerHeight - 1) + 1 * Math.random() < 0.5 ? -1 : 1);
  mesh.position.z = (Math.random() * (10 - 1) + 1 * Math.random() < 0.5 ? -1 : 1);

  scene.add(mesh);
}

var light = new THREE.PointLight(0xFFFFFF, 1, 500);

light.position.set(10, 0, 25);

scene.add(light);

var render = function() {
  requestAnimationFrame(render);

  mesh.position.y -= 0.05;
  mesh.rotation.x += 0.05;
  mesh.rotation.y += 0.01;

  renderer.render(scene, camera);
}

render();

body {
  margin: 0;
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.js" type="text/javascript"></script>

Answer 1

好的，看看这些来自three.js webgl_points_sprites 或webgl_points_billboards 的示例及其在github 上的代码，它们使用Points 和Texture 通过PointsMaterial 附加。

我建议查看 three.js 文档和示例，也许还有 YouTube 或其他网站上的一些教程，那里有很多内容，您将在研究当前项目所需的内容时更多地了解所有这些是如何工作的！