master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_loader_md2_control.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - morphtargets - MD2 controls</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">
    <style>
      body {
        background-color: #fff;
        color: #444;
      }
      a {
        color: #08f;
      }
    </style>
  </head>

  <body>
    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - MD2 Loader -
      Ogro by <a href="http://planetquake.gamespy.com/View.php?view=Quake2.Detail&id=556">Magarnigal</a><br />
      use arrows to control characters, mouse for camera
    </div>

    <script type="module">

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

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

      import { OrbitControls } from './jsm/controls/OrbitControls.js';
      import { MD2CharacterComplex } from './jsm/misc/MD2CharacterComplex.js';
      import { Gyroscope } from './jsm/misc/Gyroscope.js';

      let SCREEN_WIDTH = window.innerWidth;
      let SCREEN_HEIGHT = window.innerHeight;

      let container, stats;
      let camera, scene, renderer;

      const characters = [];
      let nCharacters = 0;

      let cameraControls;

      const controls = {

        moveForward: false,
        moveBackward: false,
        moveLeft: false,
        moveRight: false

      };

      const clock = new v3d.Clock();

      init();
      animate();

      function init() {

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

        // CAMERA

        camera = new v3d.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
        camera.position.set(0, 150, 1300);

        // SCENE

        scene = new v3d.Scene();
        scene.background = new v3d.Color(0xffffff);
        scene.fog = new v3d.Fog(0xffffff, 1000, 4000);

        scene.add(camera);

        // LIGHTS

        scene.add(new v3d.AmbientLight(0x222222));

        const light = new v3d.DirectionalLight(0xffffff, 2.25);
        light.position.set(200, 450, 500);

        light.castShadow = true;

        light.shadow.mapSize.width = 1024;
        light.shadow.mapSize.height = 512;

        light.shadow.camera.near = 100;
        light.shadow.camera.far = 1200;

        light.shadow.camera.left = - 1000;
        light.shadow.camera.right = 1000;
        light.shadow.camera.top = 350;
        light.shadow.camera.bottom = - 350;

        scene.add(light);
        // scene.add(new v3d.CameraHelper(light.shadow.camera));


        //  GROUND

        const gt = new v3d.TextureLoader().load("textures/terrain/grasslight-big.jpg");
        const gg = new v3d.PlaneBufferGeometry(16000, 16000);
        const gm = new v3d.MeshPhongMaterial({ color: 0xffffff, map: gt });

        const ground = new v3d.Mesh(gg, gm);
        ground.rotation.x = - Math.PI / 2;
        ground.material.map.repeat.set(64, 64);
        ground.material.map.wrapS = v3d.RepeatWrapping;
        ground.material.map.wrapT = v3d.RepeatWrapping;
        ground.material.map.encoding = v3d.sRGBEncoding;
        // note that because the ground does not cast a shadow, .castShadow is left false
        ground.receiveShadow = true;

        scene.add(ground);

        // RENDERER

        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
        container.appendChild(renderer.domElement);

        //

        renderer.outputEncoding = v3d.sRGBEncoding;
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = v3d.PCFSoftShadowMap;

        // STATS

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

        // EVENTS

        window.addEventListener('resize', onWindowResize, false);
        document.addEventListener('keydown', onKeyDown, false);
        document.addEventListener('keyup', onKeyUp, false);

        // CONTROLS

        cameraControls = new OrbitControls(camera, renderer.domElement);
        cameraControls.target.set(0, 50, 0);
        cameraControls.enableKeys = false;
        cameraControls.update();

        // CHARACTER

        const configOgro = {

          baseUrl: "models/md2/ogro/",

          body: "ogro.md2",
          skins: ["grok.jpg", "ogrobase.png", "arboshak.png", "ctf_r.png", "ctf_b.png", "darkam.png", "freedom.png",
               "gib.png", "gordogh.png", "igdosh.png", "khorne.png", "nabogro.png",
               "sharokh.png"],
          weapons: [["weapon.md2", "weapon.jpg"]],
          animations: {
            move: "run",
            idle: "stand",
            jump: "jump",
            attack: "attack",
            crouchMove: "cwalk",
            crouchIdle: "cstand",
            crouchAttach: "crattack"
          },

          walkSpeed: 350,
          crouchSpeed: 175

        };

        const nRows = 1;
        const nSkins = configOgro.skins.length;

        nCharacters = nSkins * nRows;

        for (let i = 0; i < nCharacters; i++) {

          const character = new MD2CharacterComplex();
          character.scale = 3;
          character.controls = controls;
          characters.push(character);

        }

        const baseCharacter = new MD2CharacterComplex();
        baseCharacter.scale = 3;

        baseCharacter.onLoadComplete = function() {

          let k = 0;

          for (let j = 0; j < nRows; j ++) {

            for (let i = 0; i < nSkins; i++) {

              const cloneCharacter = characters[k];

              cloneCharacter.shareParts(baseCharacter);

              // cast and receive shadows
              cloneCharacter.enableShadows(true);

              cloneCharacter.setWeapon(0);
              cloneCharacter.setSkin(i);

              cloneCharacter.root.position.x = (i - nSkins / 2) * 150;
              cloneCharacter.root.position.z = j * 250;

              scene.add(cloneCharacter.root);

              k ++;

            }

          }

          const gyro = new Gyroscope();
          gyro.add(camera);
          gyro.add(light, light.target);

          characters[Math.floor(nSkins / 2)].root.add(gyro);

        };

        baseCharacter.loadParts(configOgro);

      }

      // EVENT HANDLERS

      function onWindowResize() {

        SCREEN_WIDTH = window.innerWidth;
        SCREEN_HEIGHT = window.innerHeight;

        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

        camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
        camera.updateProjectionMatrix();

      }

      function onKeyDown(event) {

        switch (event.keyCode) {

          case 38: /*up*/
          case 87: /*W*/   controls.moveForward = true; break;

          case 40: /*down*/
          case 83: /*S*/    controls.moveBackward = true; break;

          case 37: /*left*/
          case 65: /*A*/ controls.moveLeft = true; break;

          case 39: /*right*/
          case 68: /*D*/ controls.moveRight = true; break;

          //case 67: /*C*/     controls.crouch = true; break;
          //case 32: /*space*/ controls.jump = true; break;
          //case 17: /*ctrl*/  controls.attack = true; break;

        }

      }

      function onKeyUp(event) {

        switch (event.keyCode) {

          case 38: /*up*/
          case 87: /*W*/ controls.moveForward = false; break;

          case 40: /*down*/
          case 83: /*S*/    controls.moveBackward = false; break;

          case 37: /*left*/
          case 65: /*A*/    controls.moveLeft = false; break;

          case 39: /*right*/
          case 68: /*D*/ controls.moveRight = false; break;

          //case 67: /*C*/     controls.crouch = false; break;
          //case 32: /*space*/ controls.jump = false; break;
          //case 17: /*ctrl*/  controls.attack = false; break;

        }

      }

      //

      function animate() {

        requestAnimationFrame(animate);
        render();

        stats.update();

      }

      function render() {

        const delta = clock.getDelta();

        for (let i = 0; i < nCharacters; i++) {

          characters[i].update(delta);

        }

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>