<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 } ) );
也没有像样的文档说明...连函数的参数都不给。。这一句代码分析了一天.....