Three.js простая анимация частиц

Question

Я пытаюсь воссоздать существующую анимацию частиц ( предыдущий пост ), используя three.js для добавления перспективы и трехмерного вращения. Я впервые использую three.js, и у меня возникают некоторые проблемы с тем, как:

1. Случайно рассеивать частицы на экране.
2. Правильно (без черного фона)Примените текстуру изображения к частицам.
3. Примените вращение так же, как в моем предыдущем посте, но с некоторым касанием 3d.

В основном я пытаюсь воссоздать то, что пытался сделатьв моем предыдущем посте на canvas, используя three.js.

Пожалуйста, укажите мне правильное направление. Спасибо:)

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 с текстурой , прикрепленной через PointsMaterial .

Я предлагаю ознакомиться с документацией и примерами three.js, а также, возможно, с некоторыми учебными пособиями на YouTube или других сайтах. Там есть много полезного, и вы узнаете больше о том, как все это работает, изучая то, что вам нужно для вашей текущей работы. проект!