master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_loader_collada_kinematics.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - collada - kinematics</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> collada loader - kinematics<br/>
      robot from <a href="https://github.com/rdiankov/collada_robots" target="_blank" rel="noopener">collada robots</a>
    </div>

    <script type="module">

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

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

      import { TWEEN } from './jsm/libs/tween.module.min.js';
      import { ColladaLoader } from './jsm/loaders/ColladaLoader.js';

      let container, stats;

      let camera, scene, renderer;
      let particleLight;
      let dae;

      let kinematics;
      let kinematicsTween;
      const tweenParameters = {};

      const loader = new ColladaLoader();
      // loader.load('./models/collada/kawada-hironx.dae', function(collada) {
      loader.load('./models/collada/abb_irb52_7_120.dae', function(collada) {

        dae = collada.scene;

        dae.traverse(function(child) {

          if (child.isMesh) {

            // model does not have normals
            child.material.flatShading = true;

          }

        });

        dae.scale.x = dae.scale.y = dae.scale.z = 10.0;
        dae.updateMatrix();

        kinematics = collada.kinematics;

        init();
        animate();

      });

      function init() {

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

        camera = new v3d.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
        camera.position.set(2, 2, 3);

        scene = new v3d.Scene();

        // Grid

        const grid = new v3d.GridHelper(20, 20, 0x888888, 0x444444);
        scene.add(grid);

        // Add the COLLADA

        scene.add(dae);

        particleLight = new v3d.Mesh(new v3d.SphereBufferGeometry(4, 8, 8), new v3d.MeshBasicMaterial({ color: 0xffffff }));
        scene.add(particleLight);

        // Lights

        const light = new v3d.HemisphereLight(0xffeeee, 0x111122);
        scene.add(light);

        const pointLight = new v3d.PointLight(0xffffff, 0.3);
        particleLight.add(pointLight);

        renderer = new v3d.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        stats = new Stats();
        container.appendChild(stats.dom);

        setupTween();

        //

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

      }

      function setupTween() {

        const duration = v3d.MathUtils.randInt(1000, 5000);

        const target = {};

        for (const prop in kinematics.joints) {

          if (kinematics.joints.hasOwnProperty(prop)) {

            if (!kinematics.joints[prop].static) {

              const joint = kinematics.joints[prop];

              const old = tweenParameters[prop];

              const position = old ? old : joint.zeroPosition;

              tweenParameters[prop] = position;

              target[prop] = v3d.MathUtils.randInt(joint.limits.min, joint.limits.max);

            }

          }

        }

        kinematicsTween = new TWEEN.Tween(tweenParameters).to(target, duration).easing(TWEEN.Easing.Quadratic.Out);

        kinematicsTween.onUpdate(function(object) {

          for (const prop in kinematics.joints) {

            if (kinematics.joints.hasOwnProperty(prop)) {

              if (!kinematics.joints[prop].static) {

                kinematics.setJointValue(prop, object[prop]);

              }

            }

          }

        });

        kinematicsTween.start();

        setTimeout(setupTween, duration);

      }

      function onWindowResize() {

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

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

      }

      //

      function animate() {

        requestAnimationFrame(animate);

        render();
        stats.update();
        TWEEN.update();

      }

      function render() {

        const timer = Date.now() * 0.0001;

        camera.position.x = Math.cos(timer) * 20;
        camera.position.y = 10;
        camera.position.z = Math.sin(timer) * 20;

        camera.lookAt(0, 5, 0);

        particleLight.position.x = Math.sin(timer * 4) * 3009;
        particleLight.position.y = Math.cos(timer * 5) * 4000;
        particleLight.position.z = Math.cos(timer * 4) * 3009;

        renderer.render(scene, camera);

      }

    </script>
  </body>
</html>