[英]JavaScript array optimization to improve performance
我使用WebGL创建将落到平面上的球体。 这些球体存储到名为ballArray的数组中,并在计时器上连续创建。 如果任何球体超过某个-y值,它们将从场景和数组中移除。 我遇到的麻烦是每帧我都调用render(),所以如果说ball0被删除,我的循环仍然会寻找它,但是程序运行任何球的方式可能会下降,无论数组中的位置如何。 我是怎么做到的:
var ballArray =[];
var i = 0;
var temp;
function createBall()
{
temp = Math.random() * (4 - 1) + 1; //creates the size of the ball
ball = new Physijs.SphereMesh(
new THREE.SphereGeometry(temp,16,16),
Physijs.createMaterial(new THREE.MeshLambertMaterial(
{
color: 0xff0000,
reflectivity: 0.8
}),0.4,0.6),1 ); //generates the ball with Physijs (this uses three.js)
var r =
{
x: Math.random() * (Math.PI - Math.PI / 12) + Math.PI / 12,
y: Math.random() * (Math.PI - Math.PI / 12) + Math.PI / 12,
z: Math.random() * (Math.PI - Math.PI / 12) + Math.PI / 12
};
//sets all the attributes associated with the ball
ball.rotation.set(r.x, r.y, r.z);
ball.position.y = 40;
ball.castShadow = true;
ball.receiveShadow = true;
ball.name = "ball"+i; //sets the name to 'ball' + whatever iteration its on
//Gather all the ball information
var json = {Name: "ball"+i, X: ball.position.x, Y: ball.position.y, Z: ball.position.z, Size: temp, Ball: ball};
console.log(JSON.stringify(json));
ballArray.push(json); // Push it to the array
delete temp, json, ball; // clear the variables used
}
var timer = setInterval(function() { addBall() }, 1000); // Call add ball using a timer
function addBall()
{
if(i >= 0) // just to be used while testing the balls will fall continuously
{
createBall();
scene.add(ballArray[i].Ball); //add the ball to the scene
i++; // increment i
}
else
{
//console.log("Finished");
clearInterval(timer);
}
}
render();
scene.simulate();
function render()
{
for (var i = 0; i < ballArray.length; i++) //Loop through the array
{
object = scene.getObjectByName( "ball"+i, true ); //get the reference to the ball
if(object) //if there is a ball
{
if (object.position.y <= -50) //if the balls position has gone below -50
{
scene.remove(object); //remove the object from the scene
ballArray.splice(i,1); //remove the object from the array
console.log(" ball"+i+" removed"); //print out
}
}
else //if there is not a ball in the scene
{
console.log("ball gone is ball"+i);
}
delete object;
}
renderer.render(scene, camera); //render
requestAnimationFrame(render);
}
我知道线object = scene.getObjectByName( "ball"+i, true );
这就是为什么它寻找它的原因,但是有没有更优化的方法来使用数组搜索场景,所以说到后期时,它无需搜索100个已移除的球就可以更新屏幕上的当前球。 。
******这个问题已经过编辑,以包含有关我如何制作和使用球的所有必要信息
会做这样的事情:
//empty ball array
var ballArray = [];
//add any ball you want
ballArray.push("ball1");
ballArray.push("ball2");
ballArray.push("ball3");
//It will keep in note the index to delete AFTER the forEach loop
var indexToDelete = [];
//For each ball that are still in the table
ballArray.forEach(function(entry) {
object = scene.getObjectByName(entry, true);
//That IF statement can be removed if you want
//Maybe you can use now a try catch
if (object) {
if (object.position.y <= -50) //if the balls position has gone below -50
{
scene.remove(object); //remove the object from the scene
console.log(entry + " removed"); //print out
indexToDelete.push(ballArray.indexOf(entry)) //add the index to delete
}
}
delete object;
});
//Loop to remove the balls
for (var i = 0; i < indexToDelete.length; i++)
{
ballArray.splice(indexToDelete[i], 1);
}
编辑:没有表副本的代码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.