Javascript 三个js中的Tween js

我想问一些关于三个js中的tween js的问题。下面是粒子形成的编码，如下图所示：

从这里开始，这是tween编码，单击粒子时粒子将在其中移动。但是，我的粒子似乎无法在二者之间转换。我能知道我在编码过程中遗漏了什么吗？我面临的问题是什么

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

---

我认为您应该定义开始和结束对象，并添加一个“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();

---

intersects.length>0

是否为真？我能知道更改号码的效果吗？对不起，我听不懂你的帖子？@yukikoying你的浏览器控制台中有错误消息吗？@prisoner849没有，浏览器控制台中没有错误消息

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