我最近一直试图生成一个粒子系统,我一直在努力让它工作,因为它基于一个过时的版本three.js,它没有出现在场景中,我不知道为什么。这可能是显而易见的,但我对此并不擅长。
var particleCount = 1800,
particles = new THREE.Geometry(),
pMaterial = new THREE.PointsMaterial({
size: 20,
map: THREE.TextureLoader("x.png"),
blending: THREE.AdditiveBlending,
transparent: true
});
var particleCount = 500,
particleSystem;
init();
render();
function init() {
for (var p = 0; p < particleCount; p++) {
(pX = Math.random() * 500 - 250),
(pY = Math.random() * 500 - 250),
(pZ = Math.random() * 500 - 250),
(particle = new THREE.Vector3(new THREE.Vector3(pX, pY, pZ)));
particle.velocity = new THREE.Vector3(0, Math.random(), 0);
particles.vertices.push(particle);
}
particleSystem = new THREE.Points(particles, pMaterial);
particleSystem.sortParticles = true;
scene.add(particleSystem);
particleSystem.position.set(0, 0, 0);
particleSystem.scale.set(100, 100, 100);
}
function update() {
particleSystem.rotation.y += 0.01;
pCount = particleCount;
while (pCount--) {
particle = particles.vertices[pCount];
if (particle.y < -200) {
particle.y = 200;
particle.velocity.y = 0;
}
particle.velocity.y -= Math.random() * 0.1;
particle.add(particle.velocity);
}
particleSystem.geometry.__dirtyVertices = true;
renderer.render(scene, camera);
}
我可能会遗漏一些东西,因为这是几行,我必须从几百行中挑选出来。
(我是新来的,所以请不要欺负我糟糕的结构。)
提前感谢任何回复的人。
map: THREE.TextureLoader("x.png"),
应该是map: new THREE.TextureLoader().load("x.png"),
particle = new THREE.Vector3(new THREE.Vector3(pX, pY, pZ));
应该是particle = new THREE.Vector3(pX, pY, pZ);
particleSystem.geometry.__dirtyVertices = true;
已经过时,你必须使用particleSystem.geometry.verticesNeedUpdate = true;
depthTest: false
添加到点材料中var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 400);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var particleCount = 1800,
particles = new THREE.Geometry(),
pMaterial = new THREE.PointsMaterial({
size: 20,
map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/sprites/circle.png"),
blending: THREE.AdditiveBlending,
transparent: true,
depthTest: false
});
var particleCount = 500,
particleSystem;
for (var p = 0; p < particleCount; p++) {
pX = Math.random() * 500 - 250,
pY = Math.random() * 500 - 250,
pZ = Math.random() * 500 - 250,
particle = new THREE.Vector3(pX, pY, pZ);
particle.velocity = new THREE.Vector3(0, Math.random(), 0);
particles.vertices.push(particle);
}
particleSystem = new THREE.Points(particles, pMaterial);
scene.add(particleSystem);
function update() {
particleSystem.rotation.y += 0.01;
pCount = particleCount;
while (pCount--) {
particle = particles.vertices[pCount];
if (particle.y < -200) {
particle.y = 200;
particle.velocity.y = 0;
}
particle.velocity.y -= Math.random() * .1;
particle.add(particle.velocity);
}
particleSystem.geometry.verticesNeedUpdate = true;
}
renderer.setAnimationLoop(() => {
update();
renderer.render(scene, camera);
});
body {
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.js"></script>