Three.js简单粒子动画 [英] Three.js simple particle animation

问题描述

我正在尝试重新创建现有的粒子动画（上一篇文章 ）使用three.js来添加透视图和3d旋转。这是我第一次使用three.js，并且在如何操作时遇到一些问题：

I'm trying to recreate the existing particle animation (previous post) using three.js for added perspective and 3d rotation. This is my first time using three.js and I'm having some issues on how to:

1. 随机地将粒子分散在屏幕上。


2. 正确地（没有黑色背景）将图像纹理应用于粒子。


3. 像我以前的文章一样应用旋转，但要具有3d触摸。

基本上，我正在尝试重新创建我以前在 canvas ，使用three.js。

Basically I'm trying to recreate what I was trying to do in my previous post on canvas, using three.js.

请指出正确的方向。谢谢：）

Please point me in the right direction. Thank you :)

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>

推荐答案

好，来看看three.js中的这些示例 webgl_points_sprites 或 webgl_points_billboards 及其在 github 上的代码>，它们将积分与纹理通过 PointsMaterial 。

Ok take a look at these examples from three.js webgl_points_sprites or webgl_points_billboards and their code on github, they are using Points with the Texture attached via PointsMaterial.

我建议您查看three.js文档和示例，以及YouTube或其他上的一些教程，那里有很多内容，您将了解更多有关这一切的信息。在研究您当前项目的需求时有效！

I suggest checking out the three.js documentation and examples and maybe some tutorials on YouTube or others, there is a lot out there and you will learn more about how all this works while researching what you need for your current project!

这篇关于Three.js简单粒子动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！