js 随机选取动画_【three.js练习程序】动画效果，100个方块随机运动

DOCTYPE html>

ceshititle>

script>

}

style>

head>

div>

varcube= newArray(100);varcamera, scene, renderer;varid= null;

init();functioninit()

{

scene= newTHREE.Scene();

camera= newTHREE.PerspectiveCamera(45,

window.innerWidth/window.innerHeight,0.1,1000);

camera.position.x= 100;

camera.position.y= 100;

camera.position.z= 100;

camera.lookAt(scene.position);//创建一个WebGL渲染器并设置其大小

renderer= newTHREE.WebGLRenderer();

renderer.setClearColor(newTHREE.Color(0xEEEEEE));

renderer.setSize(window.innerWidth, window.innerHeight);varaxes= newTHREE.AxisHelper(200);

scene.add(axes);for(vari=0;i<100;i++)

{vargeometry= newTHREE.BoxGeometry(5,5,5);for(varj= 0; j

{varhex=Math.random()* 0xffffff;

geometry.faces[ j ].color.setHex( hex );

geometry.faces[ j+ 1].color.setHex( hex );

}varmaterial= newTHREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw:0.5} );

cube[i]= newTHREE.Mesh( geometry, material );

cube[i].position.x=Math.random()*100-50;

cube[i].position.y=Math.random()*100-50;

cube[i].position.z=Math.random()*100-50;

scene.add( cube[i] );

id=setInterval(render,33);

}functionrender()

{for(vari=0;i<100;i++)

{

cube[i].position.x+=Math.random()-0.5;

cube[i].position.y+=Math.random()-0.5;

cube[i].position.z+=Math.random()-0.5;if(Math.abs(cube[i].position.x)>100)

cube[i].position.x=0;if(Math.abs(cube[i].position.y)>100)

cube[i].position.y=0;if(Math.abs(cube[i].position.z)>100)

cube[i].position.z=0;

}

renderer.render( scene, camera );

}

document.getElementById("WebGL-output").appendChild(renderer.domElement);

}script>

body>

html>