Three jsのTween js

Question

3つのjsのうちのtween jについていくつか質問したいと思います。ここでは粒子が下の画像のように形成されているコード化されています。ここから

Image 1

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

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