Как заставить 3D-объекты плавно прыгать друг от друга при нажатии? Три.JS

Я очень новичок в Three.JS и 3D web dev в целом то, что я пытаюсь сделать, это имитировать это действие: https://www.youtube.com/watch?v=HWSTxPc8npk&feature=youtu.be&t=7s по сути, это набор 3D-плоскостей, и при щелчке весь стек реагирует и дает пространство вокруг того, который щелкнул.

На данный момент, мой базовый случай-3 плоскости и выяснить, во-первых, если я могу нажать на среднюю, как я могу заставить другие прыгать назад плавно, как если бы они были нажаты, а не мгновенное появляются и исчезают, как они делают сейчас на щелчок кнопки.

Долгосрочная цель состоит в том, чтобы иметь отдельную кнопку для каждой плоскости, так что при нажатии, выбранная плоскость будет иметь обивка вокруг него, а остальные плоскости в стеке двигаться соответственно.

Я заглянул в Твин.js, и CSS3D, но довольно перегружены, как Новичок. Любые учебники или советы будут очень признательны!

// Our Javascript will go here.
        window.addEventListener( 'resize', onWindowResize, false );

        function onWindowResize(){

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }
        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.PlaneGeometry( 3, 3, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var plane = new THREE.Mesh( geometry, material );
        plane.rotation.y = -.7;

        var material2 = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
        var material3 = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
        var plane2 = new THREE.Mesh(geometry, material2 );
        plane2.rotation.y = -.7;
        plane2.position.x = 1;

        var plane3 = new THREE.Mesh(geometry, material3);
        plane3.rotation.y = -.7;
        plane3.position.x = -1;

        scene.add( plane, plane2, plane3 );

        camera.position.z = 5;
        function render() {
            requestAnimationFrame( render );
            // cube.rotation.x += 0.1;
            // cube.rotation.y += 0.1;
            renderer.render( scene, camera );
        }
        render();

        function clickFirst() {
        TWEEN.removeAll();
        var tween = new TWEEN.Tween(plane3.position).to({x: -2}, 1000).start();
        tween.easing(TWEEN.Easing.Elastic.InOut);
            render();
        }
    </script>
    <button onclick="clickFirst();" style="background-color: white; z-index: 9999;">Click me</button>

1 ответ

  1. Во-первых, вам нужно найти 2 плоскости.

    Во-вторых, нужно сделать самолеты кликабельными:
    https://threejs.org/examples/#webgl_interactive_cubes
    https://github.com/josdirksen/learning-threejs/blob/master/chapter-09/02-selecting-objects.html

    В-третьих, вы должны использовать Tween.js для перехода.
    после выбора правой плоскости, сделайте tween для других плоскостей с tween, все для перемещения по одной оси:

    образец:

    createjs.Tween.get(plane3.position.z).to(
                    plane3.position.z + 100
                , 1000, createjs.Ease.cubicOut)
    

    Если вы добавите здесь код после начала реализации, я смогу помочь больше.