javascript - 如何使用Timelinemax/Tween来移动对象？

Question

嗨，非常棒的 Stackoverflow 小伙伴们，

我尝试将 Three.js 中的对象移动到某个点。 据我所知，我需要使用 Tween.js。 但在教程中我看到它导入了 Tween Js，但是当他使用 tween js 时，他使用了“timelinemax”，我认为这有点难以理解？顺便说一下。

我的代码如下。

var scene = new THREE.Scene();





scene.background = new THREE.Color( 0xf0f0f0 )
var camera = new THREE.PerspectiveCamera(100, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.x = 40;
camera.position.y = 20;
camera.position.z = 1500;

var renderer = new THREE.WebGLRenderer();
var render = function(){
    requestAnimationFrame(render);
    renderer.render(scene,camera)
}
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// end template here




var coord =[{"x":300,"y":10,"z":10},{"x":20,"y":30,"z":30},{"x":30,"y":0,"z":50},
            {"x":40,"y":20,"z":70},{"x":50,"y":100,"z":90},
            {"x":60,"y":30,"z":110},{"x":70,"y":150,"z":90}]


var sphr
var geom
var sphrinfo=[]

function drawsphre(){
    for (let i =0; i<coord.length; i++){

        var mat = new THREE.MeshPhongMaterial( { flatShading: true } )
        geom = new THREE.SphereGeometry( 60, 50, 50);
        sphr = new THREE.Mesh( geom, mat);
        console.log()

        sphr.position.set(coord[i].x,coord[i].y,coord[i].z)
        sphrinfo.push(sphr)

        sphr.tl = new TimelineMax()
        sphr.tl.to(sphr.position.set,.5,{x:100,y:204,z:300})


        scene.add(sphr);
        render()



    }
}
drawsphre();



function movesphr(){
for (let i=0;i<coord.length;i++){
    sphrinfo[i].z=10
}

}



function animate() {


}

var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

// White directional light at 70% intensity shining from the top.
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
scene.add( directionalLight );

我放了

时间线最大 但球体根本不动。 谁能帮我解决这个问题吗？

最终我想做的是 生成一堆具有特定 x、y、z 值的球体。 并使所有球体落到我猜 z 坐标为零的平面上。

我正在尝试将其动画化。

提前致谢。

Answer 1

补间适用于属性，但您正在尝试补间 sphr.position.set 这是一个函数。
您应该只调整 sphr.position 上的 x、y 和 z 值。

下面是一个演示，请查看animateBox功能。

var camera, scene, renderer, mesh, material;
init();
renderloop();
// Start the box animating.
animateBox();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer();
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // Create camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 800;

    // Create scene.
    scene = new THREE.Scene();

    // Create material
    material = new THREE.MeshPhongMaterial();

    // Create cube and add to scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // Create ambient light and add to scene.
    var light = new THREE.AmbientLight(0x404040); // soft white light
    scene.add(light);

    // Create directional light and add to scene.
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);

}

function renderloop() {
    requestAnimationFrame(renderloop);
    renderer.render(scene, camera);
}

function animateBox() {
  
  // just use tweens.
  //gsap.to(mesh.position, {x: Math.floor((Math.random() * 600) - 300), duration: 5, ease: "elastic"});
  //gsap.to(mesh.position, {y: Math.floor((Math.random() * 600) - 300), duration: 5, ease: "elastic"});
  //gsap.to(mesh.position, {z: Math.floor((Math.random() * 600) - 300), duration: 5, ease: "elastic"});
  
  // use a timeline (and call this function again on complete).
  // This uses GSAP V3
  var timeline = gsap.timeline({onComplete: animateBox});

  // animate mesh.position.x,
  // a random number between -300 and 300,
  // for 2 seconds.
  timeline.to(
    mesh.position,
    {x: Math.floor((Math.random() * 600) - 300), duration: 2, ease: "elastic"},
    0
  );
  
  // animate mesh.position.y
  timeline.to(
    mesh.position,
    {y: Math.floor((Math.random() * 600) - 300), duration: 2, ease: "elastic"},
    0
  );

  // animate mesh.position.z
  timeline.to(
    mesh.position,
    {z: Math.floor((Math.random() * 600) - 300), duration: 2, ease: "elastic"},
    0
  );
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

body {
    padding: 0;
    margin: 0;
}
canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/gsap.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>