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

2024-05-21 • 问答

您好，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,"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坐标为零的平面上。

我正在尝试制作动画。

谢谢。

补间可以处理属性，但是您正在尝试补间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).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),{z: Math.floor((Math.random() * 600) - 300),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,duration: 2,ease: "elastic"},0
  );
  
  // animate mesh.position.y
  timeline.to(
    mesh.position,0
  );

  // animate mesh.position.z
  timeline.to(
    mesh.position,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>

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

jack2010allen 回答：如何使用Timelinemax / Tween来移动对象？

大家都在问