Анимация Вращения ThreeJS

У меня есть куб в трех точках, и я хотел бы поворачивать его на 90 градусов по часовой стрелке каждый раз, когда я нажимаю кнопку. Я думаю, что у меня есть основная суть этого: создать тройку.Пример анимации, привяжите его к кубу, а затем начинайте анимацию каждый раз, когда я нажимаю правильную кнопку. Однако мне трудно понять API ThreeJS, потому что он, похоже, не содержит никаких примеров для своих методов.

Это три.конструктор анимации js: (root, data, interpolationType, JITCompile) я не понимаю, что происходит в полях. Я предполагаю, что корень будет там, где я положил свой куб, но как насчет остального?

Также можно ли просто вызвать animation.play(), чтобы вызвать анимацию, когда я захочу? А как работает аниматор-манипулятор?

1 5
javascript three.js

1 ответ:

Я думаю, что для поворота объекта на 90 градусов по часовой стрелке будет достаточно использовать класс TWEEN. Я думаю, что класс анимации удобен для более тяжелых вещей (таких как кости / морфы кожи / и т. д.)

Для использования класса tween существует 3 основных шага:

  1. включите класс в свой файл (<script src="js/Tween.js"></script>)
  2. добавьте анимацию для нужного события (new TWEEN.Tween( cube.rotation ).to( { y:Math.random()}, 1000 ).easing( TWEEN.Easing.Quadratic.EaseOut).start();)
  3. обновите анимацию в цикле визуализации(TWEEN.update();)

Вы можете посмотреть на кубики между примерами для a начать.

Я изменил пример Куба по умолчанию, чтобы иметь анимацию в:

три.Яш куб анимации

<!doctype html>
<html lang="en">
    <head>
        <title>three.js canvas - geometry - cube</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #f0f0f0;
                margin: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <script src="../build/Three.js"></script>
        <script src="js/Tween.js"></script>
        <script src="js/RequestAnimationFrame.js"></script>
        <script src="js/Stats.js"></script>

        <script>

            var container, stats;

            var camera, scene, renderer;

            var cube, plane;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            var rad90 = Math.PI * .5;

            init();
            animate();

            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                var info = document.createElement( 'div' );
                info.style.position = 'absolute';
                info.style.top = '10px';
                info.style.width = '100%';
                info.style.textAlign = 'center';
                info.innerHTML = 'click to tween';
                container.appendChild( info );

                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.y = 150;
                camera.position.z = 500;

                scene = new THREE.Scene();

                // Cube

                var materials = [];

                for ( var i = 0; i < 6; i ++ ) {

                    materials.push( [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) ] );

                }

                cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );
                cube.position.y = 150;
                cube.overdraw = true;
                scene.add( cube );

                // Plane

                plane = new THREE.Mesh( new THREE.PlaneGeometry( 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
                plane.rotation.x = - 90 * ( Math.PI / 180 );
                plane.overdraw = true;
                scene.add( plane );

                renderer = new THREE.CanvasRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );

                container.appendChild( renderer.domElement );

                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                container.appendChild( stats.domElement );

                document.addEventListener( 'mousedown', onDocumentMouseDown, false );
            }

            //

            function onDocumentMouseDown( event ) {

                event.preventDefault();
                new TWEEN.Tween( cube.rotation ).to( {  y:  cube.rotation.y + rad90}, 1000 ).easing( TWEEN.Easing.Quadratic.EaseOut).start();
                new TWEEN.Tween( plane.rotation ).to( { z:  plane.rotation.z + rad90}, 1000 ).easing( TWEEN.Easing.Quadratic.EaseOut).start();

                console.log("click");
            }

            //

            function animate() {

                requestAnimationFrame( animate );

                render();
                stats.update();

            }

            function render() {
                TWEEN.update();
                renderer.render( scene, camera );

            }

        </script>

    </body>
</html>
11