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

Question

Hi Awesome 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 );

我放

TimelineMax但是球体根本不动。谁能帮我解决这个问题？

最终我想做的是生成一堆具有特定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>