master

分支 (1)

管理

管理

master

verge3d-code-examples
/
misc_animation_keys.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - animation - basic</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
  </head>
  <body>

    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> webgl - animation - basic use
    </div>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';

      import Stats from './jsm/libs/stats.module.js';

      let stats, clock;
      let scene, camera, renderer, mixer;

      init();
      animate();

      function init() {

        scene = new v3d.Scene();

        //

        camera = new v3d.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.set(25, 25, 50);
        camera.lookAt(scene.position);

        //

        const axesHelper = new v3d.AxesHelper(10);
        scene.add(axesHelper);

        //

        const geometry = new v3d.BoxBufferGeometry(5, 5, 5);
        const material = new v3d.MeshBasicMaterial({ color: 0xffffff, transparent: true });
        const mesh = new v3d.Mesh(geometry, material);
        scene.add(mesh);

        // create a keyframe track (i.e. a timed sequence of keyframes) for each animated property
        // Note: the keyframe track type should correspond to the type of the property being animated

        // POSITION
        const positionKF = new v3d.VectorKeyframeTrack('.position', [0, 1, 2], [0, 0, 0, 30, 0, 0, 0, 0, 0]);

        // SCALE
        const scaleKF = new v3d.VectorKeyframeTrack('.scale', [0, 1, 2], [1, 1, 1, 2, 2, 2, 1, 1, 1]);

        // ROTATION
        // Rotation should be performed using quaternions, using a v3d.QuaternionKeyframeTrack
        // Interpolating Euler angles (.rotation property) can be problematic and is currently not supported

        // set up rotation about x axis
        const xAxis = new v3d.Vector3(1, 0, 0);

        const qInitial = new v3d.Quaternion().setFromAxisAngle(xAxis, 0);
        const qFinal = new v3d.Quaternion().setFromAxisAngle(xAxis, Math.PI);
        const quaternionKF = new v3d.QuaternionKeyframeTrack('.quaternion', [0, 1, 2], [qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w]);

        // COLOR
        const colorKF = new v3d.ColorKeyframeTrack('.material.color', [0, 1, 2], [1, 0, 0, 0, 1, 0, 0, 0, 1], v3d.InterpolateDiscrete);

        // OPACITY
        const opacityKF = new v3d.NumberKeyframeTrack('.material.opacity', [0, 1, 2], [1, 0, 1]);

        // create an animation sequence with the tracks
        // If a negative time value is passed, the duration will be calculated from the times of the passed tracks array
        const clip = new v3d.AnimationClip('Action', 3, [scaleKF, positionKF, quaternionKF, colorKF, opacityKF]);

        // setup the v3d.AnimationMixer
        mixer = new v3d.AnimationMixer(mesh);

        // create a ClipAction and set it to play
        const clipAction = mixer.clipAction(clip);
        clipAction.play();

        //

        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        //

        stats = new Stats();
        document.body.appendChild(stats.dom);

        //

        clock = new v3d.Clock();

        //

        window.addEventListener('resize', onWindowResize, false);

      }

      function onWindowResize() {

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

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

      }

      function animate() {

        requestAnimationFrame(animate);

        render();

      }

      function render() {

        const delta = clock.getDelta();

        if (mixer) {

          mixer.update(delta);

        }

        renderer.render(scene, camera);

        stats.update();

      }

    </script>

  </body>
</html>