为什么这个简单的THREE.js javascript粒子系统无法正常工作?

时间:2014-12-14 08:06:22

标签: javascript three.js

这段代码有什么错误吗?我正在使用新版Chrome进行测试。我编写了一个显示线框立方体的类似程序,没有任何问题。它运行良好。我想我可能错误地编写或编写了我的代码。

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(50,window.innerWidth/window.innerHeight, 1, 10000); 
var renderer = new THREE.WebGLRenderer(); 
  renderer.setSize(window.innerWidth, window.innerHeight); 
  document.body.appendChild(renderer.domElement); 

// create the particle variables
var particleCount = 1000;
var particles = new THREE.Geometry();
var pMaterial = new THREE.ParticleBasicMaterial({
  color: 'red',
  size: 20
});

// create the individual particles
for (var p = 0; p < particleCount; p++) {
  var pX = Math.random()*500 - 250;
  var pY = Math.random()*500 - 250;
  var pZ = Math.random()*500 - 250;
  var particle = new THREE.Vertex(
    new THREE.Vector3(pX, pY, pZ)
  );
  particles.vertices.push(particle);
}

// create the particle system
var particleSystem = new THREE.ParticleSystem(
  particles,
  pMaterial);

// add the particle system to the scene
scene.add(particleSystem);

function render() {
  particleSystem.rotation.y += 0.01;
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render();

我没有看到任何结果,可以这么说 - 只是页面上的黑色画布元素。

1 个答案:

答案 0 :(得分:3)

您的代码看起来过时了 - 就好像您从网上或过时的书中复制了一些内容。

更新到当前版本的three.js,并从当前的three.js示例中学习。

像这样创建你的粒子:

var particle = new THREE.Vector3( pX, pY, pZ );

此外,ParticleSystem现在为PointCloudParticleBasicMaterial现为PointCloudMaterial

three.js r.69