在Three.JS粒子系统中移动单个粒子
Moving individual particles within a Three.JS particle system
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;
}
}
似乎必须在创建particleSystem
之后添加particleSystem.sortParticles = true;
。
我在同一教程中遇到了完全相同的问题,但使用ThreeJS 86,我既不需要setY()
也不需要particleSystem.sortParticles = true;
,而是需要particleSystem.geometry.verticesNeedUpdate = true;
(而不是particleSystem.geometry.vertices.needsUpdate = true;
)。
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- FabricJs-限制主对象内添加对象的移动区域
- Javascript,有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
- 如何从画布上的某个移动事件中获取X和Y
- 触摸移动时切换到新元素
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 如何使用javascript获取嵌套对象中所有子对象的单个属性
- 是否可以禁用jquery中的单个单选按钮
- 停止jQuery UI滑块移动超过给定值
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 如何在 Google 表格中移动单个单元格
- Jquery移动表单数据在单个文件中的两个页面之间提交
- 如何在单个html5jquery移动应用程序中刷新页面
- 如何让单个标记在用户移动时更新它的位置?
- 在RaphaelJS中,我如何移动路径中的单个节点
- 在Three.JS粒子系统中移动单个粒子
- 将单个字母单词移动到新行