遇到Three.js的一些问题。我正在尝试在渲染每个帧时在粒子系统内移动粒子。没有报告任何错误,但也没有任何移动!我从http://aerotwist.com/tutorials/creating-particles-with-three-js/的代码中获取的示例使用语法particle.position.y
,但当我更改以下代码以反映该代码时,JS控制台返回Cannot set property 'y' of undefined
。我非常感谢任何有关我出错的帮助或指示。
完整源代码:
var scene, camera, renderer, particleCount = 0, particleSystem, particles;
init();
animate();
function init()
{
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
scene.add(camera);
camera.position.z = 5;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
particleCount = 1800,
particles = new THREE.Geometry();
var pMaterial = new THREE.ParticleBasicMaterial({color: 0xFFFFFF, size: 0.5});
for (var i = 0; i < particleCount; i++)
{
var pX = Math.random() * 500 - 250,
pY = Math.random() * 500 - 250,
pZ = Math.random() * 500 - 250,
particle = new THREE.Vector3(pX, pY, pZ);
particles.vertices.push(particle);
}
particleSystem = new THREE.ParticleSystem(particles, pMaterial);
scene.add(particleSystem);
}
function animate()
{
requestAnimationFrame(animate);
renderer.render(scene, camera);
var pCount = particleCount;
while (pCount--)
{
var particle = particles.vertices[pCount];
particle.y = Math.random() * 500 - 250;
particleSystem.geometry.vertices.needsUpdate = true;
}
}
答案 0 :(得分:1)
您似乎必须在创建particleSystem.sortParticles = true;
后添加particleSystem
。
答案 1 :(得分:1)
我在同一个教程中遇到了完全相同的问题但是,使用ThreeJS 86,我既不需要setY()
也不需要particleSystem.sortParticles = true;
,而是particleSystem.geometry.verticesNeedUpdate = true;
(不 particleSystem.geometry.vertices.needsUpdate = true;
)。