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