Three.js简单粒子动画

Question

我正在尝试使用three.js重新创建现有的粒子动画(上一篇文章(，以添加透视和三维旋转。这是我第一次使用three.js，我在如何：方面遇到了一些问题

1. 在屏幕上随机散射粒子
2. 正确地(没有黑色背景(将图像纹理应用于粒子
3. 应用旋转就像我以前的帖子一样，但有一些三维触摸

基本上，我正在尝试使用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

好的，看看三个.js webgl_points_sprites或webgl_ppoints_adverties的这些例子及其在github上的代码，它们使用的是通过PointsMaterial附加纹理的points。

我建议你看看three.js的文档和例子，也许还有YouTube或其他网站上的一些教程，那里有很多，你会在研究你当前项目所需的东西的同时，了解更多关于这一切是如何工作的！