ThreeJS:补间动画

时间:2019-11-07 12:21:18

标签: three.js

在这里,我试图将对象补间到中心点。当我尝试放大或缩小补间时 可以正确实现,但是当我尝试旋转对象并将其平移到不同方向并尝试添加补间效果时,效果就很奇怪。 请帮我解决这个问题。 我只是试图将对象补间到中心点,即使当它旋转和平移到不同方向时也是如此。 这是小提琴链接https://jsfiddle.net/fw79mcja/

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var cube1 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
    cube1.position.x = -1;
    scene.add(cube1);

    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    var cube2 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x0000ff }));
    cube2.position.x = 1;
    scene.add(cube2);

    camera.position.z = 3;

    document.querySelector('#tweenExample').addEventListener('click', () => {
        var to = {
            x: 0,
            y: 0,
            z: 7
        };
        var tween1 = new TWEEN.Tween(camera.position)
            .to(to, 700)
            .delay(200)
            .easing(TWEEN.Easing.Linear.None)
            .start();
            render();

        var tween2 = new TWEEN.Tween({ y: cube2.rotation.y })
            .to({ y: cube2.rotation.y - 1.5 }, 700)
            .delay(400)
            .easing(TWEEN.Easing.Quadratic.Out);

        tween2.onUpdate(function (object) {
            cube2.rotation.y = object.y;
        });

        tween2.start();
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        renderer.render(scene, camera);
        controls.update();
        render();
    });

    function animate(ts) {
        requestAnimationFrame(animate);

        TWEEN.update(ts);

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

        camera.updateProjectionMatrix();
        // geometry.rotation.x += 1;
        renderer.render(scene, camera);
        controls.update();
    }
    animate();

0 个答案:

没有答案