html5中立体贴图有拖影问题的解决

<script src="./js/Three.js"></script><script type="text/javascript">var SEPARATION = 100;var AMOUNTX = 50;var AMOUNTY = 50;var container, stats;var controls;var camera, scene, renderer, particle;var mouseX = 0, mouseY = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;var clock = new THREE.Clock();init();animate();function init() {camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );camera.position.set(0,0, 200);scene = new THREE.Scene();scene.add( camera );controls = new THREE.RollControls( camera );controls.movementSpeed = 100;controls.lookSpeed = 2;controls.constrainVertical = [ -0.5, 0.5 ];var PI2 = Math.PI * 2;var material = new THREE.ParticleCanvasMaterial( {color: 0x123456,program: function ( context ) {context.beginPath();var img=new Image();img.src='./images/test_pic.png';context.drawImage(img,0,0);context.closePath();}} );for ( var ix = 0; ix < AMOUNTX; ix++ ) {for ( var iy = 0; iy < AMOUNTY; iy++ ) {particle = new THREE.Mesh( new THREE.CubeGeometry( 20, 20, 20 ), new THREE.MeshBasicMaterial( { map:THREE.ImageUtils.loadTexture('images/test_pic.png', new THREE.UVMapping(), function() {renderer.render(scene);}), overdraw: true } ) );particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );scene.add( particle );}}renderer = new THREE.CanvasRenderer();renderer.setSize( window.innerWidth, window.innerHeight );container = document.getElementById("frame_main_stillsbox");container.appendChild( renderer.domElement );}function animate() {requestAnimationFrame( animate );render();}function render() {controls.update( clock.getDelta() );renderer.render( scene, camera );}</script>

拖影是指拖动时，立体会有一串影子跟着，是刷新不及时造成的。。。

有拖影就是因为使用了

particle = new THREE.Particle( material );

而加载图片后，没有拖影的代码为：

particle = new THREE.Mesh( new THREE.CubeGeometry( 20, 20, 20 ), new THREE.MeshBasicMaterial( { map:THREE.ImageUtils.loadTexture('images/test_pic.png', new THREE.UVMapping(), function() {renderer.render(scene);}), overdraw: true } ) );

也没有像样的文档说明...连函数的参数都不给。。这一句代码分析了一天.....