我想问三个js中关于补间js的一些问题。以下是编码颗粒的编码，如下图所示：
var scene;
var renderer;
var container
var stats;
var sphere
var clock;
var deltaTime;
var mouse;
var raycaster;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
clock = new THREE.Clock(true);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 120;
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 2, 2, 1 ).normalize();
scene.add(light);
var geometry = new THREE.SphereGeometry( 3, 10, 10 );
var material = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );
sphere = new THREE.Mesh( geometry, material );
var geometry2 = new THREE.SphereGeometry( 3, 10, 10 );
var material2 = new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
sphere2 = new THREE.Mesh( geometry2, material2 );
var geometry3 = new THREE.SphereGeometry( 3, 10, 10 );
var material3 = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphere3 = new THREE.Mesh( geometry3, material3 );
var geometry4 = new THREE.SphereGeometry( 3, 10, 10 );
var material4 = new THREE.MeshBasicMaterial( {color: 0xff89c1,transparent: true, opacity: 0.5} );
sphere4 = new THREE.Mesh( geometry4, material4 );
var geometry5 = new THREE.SphereGeometry( 3, 10, 10 );
var material5 = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );
sphere5 = new THREE.Mesh( geometry5, material5 );
var geometry6 = new THREE.SphereGeometry( 3, 10, 10 );
var material6 = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphere6 = new THREE.Mesh( geometry6, material6 );
var geometry7 = new THREE.SphereGeometry( 3, 10, 10 );
var material7 = new THREE.MeshBasicMaterial( {color: 0xe62fac,transparent: true, opacity: 0.5} );
sphere7 = new THREE.Mesh( geometry7, material7 );
var geometry8 = new THREE.SphereGeometry( 3, 10, 10 );
var material8 = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphere8 = new THREE.Mesh( geometry8, material8 );
var geometry9 = new THREE.SphereGeometry( 3, 10, 10 );
var material9 = new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
sphere9 = new THREE.Mesh( geometry9, material9 );
var geometryo = new THREE.SphereGeometry( 3, 10, 10 );
var material1o = new THREE.MeshBasicMaterial( {color: 0xe62fac,transparent: true, opacity: 0.5} );
sphereo = new THREE.Mesh( geometryo, material1o );
var geometryt = new THREE.SphereGeometry( 3, 10, 10 );
var material1t = new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
spheret = new THREE.Mesh( geometryt, material1t );
var geometryth = new THREE.SphereGeometry( 3, 10, 10 );
var material1th = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphereth = new THREE.Mesh( geometryth, material1th );
var geometryf = new THREE.SphereGeometry( 3, 10, 10 );
var material1f = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );
spheref = new THREE.Mesh( geometryf, material1f );
var geometryfi = new THREE.SphereGeometry( 3, 10, 10 );
var material1fi = new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
spherefi = new THREE.Mesh( geometryfi, material1fi );
var geometrys = new THREE.SphereGeometry( 3, 10, 10 );
var material1s = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );
spheres = new THREE.Mesh( geometrys, material1s);
var geometryse = new THREE.SphereGeometry( 3, 10, 10 );
var material1se = new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
spherese = new THREE.Mesh( geometryse, material1se );
var geometrye = new THREE.SphereGeometry( 3, 10, 10 );
var material1e = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );
spheree = new THREE.Mesh( geometrye, material1e );
var geometryn= new THREE.SphereGeometry( 3, 10, 10 );
var material1n = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
spheren = new THREE.Mesh( geometryn, material1n );
var geometryten = new THREE.SphereGeometry( 3, 10, 10 );
var material1ten = new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
sphereten = new THREE.Mesh( geometryten, material1ten );
var geometryel = new THREE.SphereGeometry( 3, 10, 10 );
var material1el = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphereel = new THREE.Mesh( geometryel, material1el);
var geometrytw = new THREE.SphereGeometry( 3, 10, 10 );
var material1tw = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );
spheretw = new THREE.Mesh( geometrytw, material1tw);
var geometrytt = new THREE.SphereGeometry( 3, 10, 10 );
var material1tt = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
spherett = new THREE.Mesh( geometrytt, material1tt);
var geometryft = new THREE.SphereGeometry( 3, 10, 10 );
var material1ft = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );
sphereft = new THREE.Mesh( geometryft, material1ft);
var geometryfit = new THREE.SphereGeometry( 3, 10, 10 );
var material1fit = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
spherefit = new THREE.Mesh( geometryfit, material1fit);
var geometry16 = new THREE.SphereGeometry( 3, 10, 10 );
var material116 = new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
sphere16 = new THREE.Mesh( geometry16, material116);
var geometry17= new THREE.SphereGeometry( 3, 10, 10 );
var material17 = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphere17 = new THREE.Mesh( geometry17, material17);
var geometry18 = new THREE.SphereGeometry( 3, 10, 10 );
var material118 = new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
sphere18 = new THREE.Mesh( geometry18, material118);
var geometry19 = new THREE.SphereGeometry( 3, 10, 10 );
var material119 = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphere19 = new THREE.Mesh( geometry19, material119);
var geometry20 = new THREE.SphereGeometry( 3, 10, 10 );
var material120 = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );
sphere20 = new THREE.Mesh( geometry20, material120);
var geometry21 = new THREE.SphereGeometry( 3, 10, 10 );
var material21 = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphere21 = new THREE.Mesh( geometry21, material21);
var geometry22 = new THREE.SphereGeometry( 3, 10, 10 );
var material22 = new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
sphere22 = new THREE.Mesh( geometry22, material22);
var geometry23 = new THREE.SphereGeometry( 3, 10, 10 );
var material23 = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphere23 = new THREE.Mesh( geometry23, material23);
var geometry24 = new THREE.SphereGeometry( 3, 10, 10 );
var material24 = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );
sphere24 = new THREE.Mesh( geometry24, material24);
var geometry25 = new THREE.SphereGeometry( 3, 10, 10 );
var material25 = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphere25 = new THREE.Mesh( geometry25, material25);
var geometry26 = new THREE.SphereGeometry( 3, 10, 10 );
var material26 = new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
sphere26 = new THREE.Mesh( geometry26, material26);
var geometry27 = new THREE.SphereGeometry( 3, 10, 10 );
var material27 = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphere27 = new THREE.Mesh( geometry27, material27);
var geometry28 = new THREE.SphereGeometry( 3, 10, 10 );
var material28 = new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
sphere28 = new THREE.Mesh( geometry28, material28);
var geometry29 = new THREE.SphereGeometry( 3, 10, 10 );
var material29 = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphere29 = new THREE.Mesh( geometry29, material29);
var geometry30 = new THREE.SphereGeometry( 3, 10, 10 );
var material30 = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphere30 = new THREE.Mesh( geometry30, material30);
var geometry31 = new THREE.SphereGeometry( 3, 10, 10 );
var material31 = new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
sphere31 = new THREE.Mesh( geometry31, material31);
var geometry32 = new THREE.SphereGeometry( 3, 10, 10 );
var material32 = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphere32 = new THREE.Mesh( geometry32, material32);
var geometry33 = new THREE.SphereGeometry( 3, 10, 10 );
var material33 = new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
sphere33 = new THREE.Mesh( geometry33, material33);
var geometry34 = new THREE.SphereGeometry( 3, 10, 10 );
var material34 = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphere34 = new THREE.Mesh( geometry34, material34);
var geometry35 = new THREE.SphereGeometry( 3, 10, 10 );
var material35 = new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
sphere35 = new THREE.Mesh( geometry35, material35);
var geometry36 = new THREE.SphereGeometry( 3, 10, 10 );
var material36 = new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphere36 = new THREE.Mesh( geometry36, material36);
var geometry37 = new THREE.SphereGeometry( 3, 10, 10 );
var material37 = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );
sphere37 = new THREE.Mesh( geometry37, material37);
var geometry38 = new THREE.SphereGeometry( 3, 10, 10 );
var material38= new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
sphere38 = new THREE.Mesh( geometry38, material38);
var geometry39 = new THREE.SphereGeometry( 3, 10, 10 );
var material39= new THREE.MeshBasicMaterial( {color: 0xe62fac,} );
sphere39 = new THREE.Mesh( geometry39, material39);
var geometry40 = new THREE.SphereGeometry( 3, 10, 10 );
var material40= new THREE.MeshBasicMaterial( {color: 0xff4ba0,} );
sphere40 = new THREE.Mesh( geometry40, material40);
var geometry41 = new THREE.SphereGeometry( 3, 10, 10 );
var material41= new THREE.MeshBasicMaterial( {color: 0xff89c1,} );
sphere41 = new THREE.Mesh( geometry41, material41);
var geometry42 = new THREE.SphereGeometry( 3, 10, 10 );
var material42= new THREE.MeshBasicMaterial( {color: 0xe62fac,} );
sphere42 = new THREE.Mesh( geometry42, material42);
sphere.position.z = -1;
sphere.position.x = -5
sphere.position.y = 20
scene.add( sphere );
sphere2.position.z = -50;
sphere2.position.x = -18
sphere2.position.y = 35
scene.add( sphere2 );
sphere3.position.z = -1;
sphere3.position.x = -20
sphere3.position.y = 30
scene.add( sphere3 );
sphere4.position.z = -1;
sphere4.position.x = -27
sphere4.position.y = 30
scene.add( sphere4 );
sphere5.position.z = -1;
sphere5.position.x = -35
sphere5.position.y = 25
scene.add( sphere5 );
sphere6.position.z = -1;
sphere6.position.x = -40
sphere6.position.y = 15
scene.add( sphere6 );
sphere7.position.z = -1;
sphere7.position.x = -35
sphere7.position.y = 5
scene.add( sphere7 );
sphere8.position.z = -1;
sphere8.position.x = -30
sphere8.position.y =-3
scene.add( sphere8);
sphere9.position.z = -1;
sphere9.position.x = -25
sphere9.position.y =-11
scene.add( sphere9);
sphereo.position.z = -1;
sphereo.position.x = -18
sphereo.position.y =-20
scene.add( sphereo);
spheret.position.z = -1;
spheret.position.x = -12
spheret.position.y =-25
scene.add( spheret);
sphereth.position.z = -1;
sphereth.position.x = -4
sphereth.position.y =-31
scene.add( sphereth);
spheref.position.z = -1;
spheref.position.x = 5
spheref.position.y =-25
scene.add( spheref);
spherefi.position.z = -1;
spherefi.position.x = 13
spherefi.position.y =-19
scene.add( spherefi);
spheres.position.z = -1;
spheres.position.x = 19
spheres.position.y =-14
scene.add( spheres);
spherese.position.z = -1;
spherese.position.x = 25
spherese.position.y =-5
scene.add( spherese);
spheree.position.z = -1;
spheree.position.x = 30
spheree.position.y =4
scene.add( spheree);
spheren.position.z = -1;
spheren.position.x = 35
spheren.position.y =12
scene.add( spheren);
sphereten.position.z = -1;
sphereten.position.x = 20
sphereten.position.y =23
scene.add( sphereten);
sphereel.position.z = -1;
sphereel.position.x = 31
sphereel.position.y =23
scene.add( sphereel);
spheretw.position.z = -1;
spheretw.position.x = 25
spheretw.position.y =30
scene.add( spheretw);
spherett.position.z = -1;
spherett.position.x = 15
spherett.position.y =30
scene.add( spherett);
sphereft.position.z = -1;
sphereft.position.x = 5
sphereft.position.y =26
scene.add( sphereft);
spherefit.position.z = -1;
spherefit.position.x = 15
spherefit.position.y = 17
scene.add( spherefit);
sphere16.position.z = -1;
sphere16.position.x = 25
sphere16.position.y = 15
scene.add( sphere16);
sphere17.position.z = -1;
sphere17.position.x = 20
sphere17.position.y = 5
scene.add( sphere17);
sphere18.position.z = -1;
sphere18.position.x = 5
sphere18.position.y = 15
scene.add( sphere18);
sphere19.position.z = -1;
sphere19.position.x = -5
sphere19.position.y = 11
scene.add( sphere19);
sphere20.position.z = -1;
sphere20.position.x = -12
sphere20.position.y = 15
scene.add( sphere20);
sphere21.position.z = -1;
sphere21.position.x = -20
sphere21.position.y = 20
scene.add( sphere21);
sphere22.position.z = -1;
sphere22.position.x = -28
sphere22.position.y = 23
scene.add( sphere22);
sphere23.position.z = -1;
sphere23.position.x = -30
sphere23.position.y = 15
scene.add( sphere23);
sphere24.position.z = -1;
sphere24.position.x = -27
sphere24.position.y = 7
scene.add( sphere24);
sphere25.position.z = -1;
sphere25.position.x = -21
sphere25.position.y = -2
scene.add( sphere25);
sphere26.position.z = -1;
sphere26.position.x = -16
sphere26.position.y = -10
scene.add( sphere26);
sphere27.position.z = -1;
sphere27.position.x = -10
sphere27.position.y = -17
scene.add( sphere27);
sphere28.position.z = -1;
sphere28.position.x = -4
sphere28.position.y = -23
scene.add( sphere28);
sphere29.position.z = -1;
sphere29.position.x = 5
sphere29.position.y = -15
scene.add( sphere29);
sphere30.position.z = -1;
sphere30.position.x = 10
sphere30.position.y = -9
scene.add( sphere30);
sphere32.position.z = -1;
sphere32.position.x = 15
sphere32.position.y = -1
scene.add( sphere32);
sphere31.position.z = -1;
sphere31.position.x = 10
sphere31.position.y = 10
scene.add( sphere31);
sphere33.position.z = -1;
sphere33.position.x = 5
sphere33.position.y = 1
scene.add( sphere33);
sphere34.position.z = -1;
sphere34.position.x = 5
sphere34.position.y = 1
scene.add( sphere34);
sphere35.position.z = -1;
sphere35.position.x = 5
sphere35.position.y = 1
scene.add( sphere35);
sphere36.position.z = -1;
sphere36.position.x = 5
sphere36.position.y = 1
scene.add( sphere36);
sphere37.position.z = -1;
sphere37.position.x = 5
sphere37.position.y = 1
scene.add( sphere37);
sphere38.position.z = -1;
sphere38.position.x = -5
sphere38.position.y = 1
scene.add( sphere38);
sphere39.position.z = -1;
sphere39.position.x = -18
sphere39.position.y = 5
scene.add( sphere39);
sphere40.position.z = -1;
sphere40.position.x = -13
sphere40.position.y = -1
scene.add( sphere40);
sphere41.position.z = -1;
sphere41.position.x = -3
sphere41.position.y = -10
scene.add( sphere41);
sphere42.position.z = -1;
sphere42.position.x = -20
sphere42.position.y = 13
scene.add( sphere42);
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
document.addEventListener('mousedown', onDocumentMouseDown , false);
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'mousedown', onDocumentMouseClick, false );
render();
}
从这里开始，这是补间编码，当点击粒子时粒子会移动。但是，似乎我的粒子没有补间。我知道我在编码中错过了什么，我面临的问题是什么？
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function onDocumentTouchStart( event ) {
event.preventDefault();
event.clientX = event.touches[0].clientX;
event.clientY = event.touches[0].clientY;
onDocumentMouseDown( event );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
console.log(mouse.x + ' ' + mouse.y);
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 ) {
new TWEEN.Tween( intersects[ 0 ].object.position ).to( {
x: Math.random() * 20,
y: Math.random() * 20,
z: Math.random() * 800 - 400 }, 2000 )
.easing( TWEEN.Easing.Elastic.Out).start();
}
}
function onDocumentMouseClick(){
animatemove();
console.log ('you clicked me');
}
function animatemove(){
sphere.position.x += 10;
sphere.position.y += 5;
sphere2.position.x += 90;
sphere2.position.y += 15;
sphere3.position.x += -50;
sphere3.position.y += 5;
sphere4.position.x += -20;
sphere4.position.y += 5;
sphere5.position.x += -10;
sphere5.position.y += 5;
console.log ('you clicked me ');
render();
// requestAnimationFrame( animatemove );
}
function animate() {
deltaTime = clock.getDelta();
sphere.rotation.x += 1 * deltaTime;
sphere.rotation.y += 2 * deltaTime;
// sphere.position.x += 3* deltaTime;
sphere2.rotation.x += 1 * deltaTime;
sphere2.rotation.y += 2 * deltaTime;
sphere3.rotation.x += 1 * deltaTime;
sphere3.rotation.y += 2 * deltaTime;
sphere3.rotation.x += 1 * deltaTime;
sphere3.rotation.y += 2 * deltaTime;
sphere4.rotation.x += 1 * deltaTime;
sphere4.rotation.y += 2 * deltaTime;
sphere5.rotation.x += 1 * deltaTime;
sphere5.rotation.y += 2 * deltaTime;
sphere6.rotation.x += 1 * deltaTime;
sphere6.rotation.y += 2 * deltaTime;
sphere7.rotation.x += 1 * deltaTime;
sphere7.rotation.y += 2 * deltaTime;
sphere8.rotation.x += 1 * deltaTime;
sphere8.rotation.y += 2 * deltaTime;
sphere9.rotation.x += 1 * deltaTime;
sphere9.rotation.y += 2 * deltaTime;
render();
requestAnimationFrame( animate );
}
function render() {
TWEEN.update();
renderer.render( scene, camera );
}
答案 0 :(得分：1)
我认为您应该定义开始和结束对象并添加“onUpdate”回调。
这应该有效：
let params = {
x:intersects[ 0 ].object.position.x,
y:intersects[ 0 ].object.position.y,
z:intersects[ 0 ].object.position.z
}
new TWEEN.Tween( params )
.to( { x: Math.random() * 20, y: Math.random() * 20, z: Math.random() * 800 - 400 }, 2000 )
.onUpdate(()=>intersects[ 0 ].object.position.set(params.x, params.y, params.z))
.easing( TWEEN.Easing.Elastic.Out)
.start();