日期:2014-05-17  浏览次数:20665 次

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 } ) );

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