はじめてのThree.js 9章 日記

はじめてのthree.js

新たに知った知識

• 複数のモデルをアニメーションするの意外と簡単

        function render() {
            stats.update();
            // rotate the cube around its axes
            cube.rotation.x += controls.rotationSpeed;
            cube.rotation.y += controls.rotationSpeed;
            cube.rotation.z += controls.rotationSpeed;

            // bounce the sphere up and down
            step += controls.bouncingSpeed;
            sphere.position.x = 20 + (10 * (Math.cos(step)));
            sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)));

            // scale the cylinder

            scalingStep += controls.scalingSpeed;
            var scaleX = Math.abs(Math.sin(scalingStep / 4));
            var scaleY = Math.abs(Math.cos(scalingStep / 5));
            var scaleZ = Math.abs(Math.sin(scalingStep / 7));
            cylinder.scale.set(scaleX, scaleY, scaleZ);

            // render using requestAnimationFrame
            renderer.render(scene, camera);
            requestAnimationFrame(render);

        }

• tweeningでイージングなどがつけれる
• trackball control
• three.clockオブジェクトで時間通りに動く
• morphtargetinfluenceは２つのオブジェクトをスムーズに変形移行させてくれる

        // create a cube
        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
        var cubeMaterial = new THREE.MeshLambertMaterial({morphTargets: true, color: 0xff0000});

        // define morphtargets, we'll use the vertices from these geometries
        var cubeTarget1 = new THREE.BoxGeometry(2, 10, 2);
        var cubeTarget2 = new THREE.BoxGeometry(8, 2, 8);

        // define morphtargets and compute the morphnormal
        cubeGeometry.morphTargets[0] = {name: 't1', vertices: cubeTarget2.vertices};
        cubeGeometry.morphTargets[1] = {name: 't2', vertices: cubeTarget1.vertices};

気づいたこと

• flycontrolとfirstpersoncontrolは結構酔う

wow moment

まだ解決していない点

• animationmixerの役割

10章はこちら