我正在嘗試使用three.js

我正在使用補間移動相機，它工作得很好 . 但是，在動畫結束時，相機會跳回到初始位置 .

我發現mousemove事件導致了這種行為 . 我如何解決這個問題并保持補間動作和鼠標移動？

我根據this example構建了我的three.js;

Mousemove declared inside render function

function render() {

camera.position.x += ( mouseX - camera.position.x ) * 0.04;

camera.position.y += ( - mouseY - camera.position.y ) * 0.04;

camera.lookAt( scene.position );

TWEEN.update();

renderer.render( scene, camera );

}

Tween movement

function setupTween (position, target, duration) {

TWEEN.removeAll();

new TWEEN.Tween (position)

.to (target, duration)

.easing (TWEEN.Easing.Quadratic.InOut)

.onUpdate (

function() {

// copy incoming position into camera position

camera.position.copy (position);

})

.start();

};

補間功能源

UPDATE

完整的工作代碼：

var container,

i,

camera,

scene,

renderer,

particles,

geometry,

materials = [],

color,

sprite,

size,

mouseX = 0,

mouseY = 0,

isTweening,

windowHalfX = window.innerWidth / 2,

windowHalfY = window.innerHeight / 2;

// +++++ three.js +++++

// +++++ +++++ +++++ +++++ +++++

function init() {

container = document.createElement( 'div' );

document.body.appendChild( container );

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.5, 2000 );

camera.position.set (0,0,1900);

scene = new THREE.Scene();

scene.fog = new THREE.FogExp2( 0x000000, 0.0005 );

geometry = new THREE.Geometry();

var textureLoader = new THREE.TextureLoader();

for ( i = 0; i < 1000; i ++ ) {

var vertex = new THREE.Vector3();

vertex.x = Math.random() * 2000 - 1000;

vertex.y = Math.random() * 2000 - 1000;

vertex.z = Math.random() * 2000 - 1000;

geometry.vertices.push( vertex );

}

sprite = textureLoader.load( "circle.png" );

color = [0.90, 0.05, 0.8];

size = 8.5;

materials = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : false } );

materials.color.setHSL( color[0], color[1], color[2] );

particles = new THREE.Points( geometry, materials );

scene.add( particles );

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

renderer.setPixelRatio( window.devicePixelRatio );

renderer.setSize( window.innerWidth, window.innerHeight );

container.appendChild( renderer.domElement );

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

}

function onWindowResize() {

windowHalfX = window.innerWidth / 2;

windowHalfY = window.innerHeight / 2;

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

function onDocumentMouseMove( event ) {

mouseX = event.clientX - windowHalfX;

mouseY = event.clientY - windowHalfY;

}

function animate() {

requestAnimationFrame( animate );

render();

}

function startTween() {

isTweening = false;

var target = new THREE.Vector3(getRandomNumber(), getRandomNumber(), getRandomNumber());

new TWEEN.Tween (camera.position.clone())

.to (target, 1000)

.easing (TWEEN.Easing.Quadratic.InOut)

.onUpdate( function() {

camera.position.copy(this);

})

.onStart ( function() {

isTweening = true;

})

.onComplete ( function() {

isTweening = false;

})

.start();

}

function getRandomNumber() {

// get a number between -1000 and -500 and 500 and 1000

return ( Math.random() * 500 + 500 ) * ( Math.random() < 0.5 ? -1 : 1 );

}

function render() {

if(!isTweening && (mouseX || mouseY)) {

// more a generic approach, not just transforming x and y (maybe it needs to be improved a bit)

var upVector = camera.up.clone().transformDirection(camera.matrix);

var forwardVector = new THREE.Vector3().subVectors(scene.position, camera.position).normalize();

var rightVector = new THREE.Vector3().crossVectors(forwardVector, upVector);

camera.translateOnAxis(rightVector, mouseX);

camera.translateOnAxis(upVector, -mouseY);

mouseX = mouseY = 0;

}

camera.lookAt( scene.position );

TWEEN.update();

renderer.render( scene, camera );

}

init();

animate();

setTimeout(function(){

startTween();

},2500);

總結

以上是生活随笔為你收集整理的mousemove事件java,three.js，补间相机和mousemove事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。