d-drive - JSFiddle

by RGMGx

HTML

<title>three.js 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">
<div id="info">
  <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - HW5 -
  <br />

  <br>
  <p id='msg'></p>
  <audio autoplay="display:none controls="" loop="" preload=""> 
		  <source src="https://rgmgx.github.io/sounds/bgm_maoudamashii_8bit23.mp3" type="audio/mp3">  
</audio>
  <audio id="collisionsound" style="display:none">
<source src="
        https://rgmgx.github.io/sounds/strange_bell.mp3
      " type='audio/mp3'>
</audio>
<audio id="water" style="display:none">
<source src="
        https://rgmgx.github.io/sounds/water_land.mp3
      " type='audio/mp3'>
</audio>
</div>

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script src='https://cdn.jsdelivr.net/gh/mrdoob/three.js@dev/examples/js/loaders/MD2Loader.js'></script>
<script src='https://cdn.jsdelivr.net/gh/mrdoob/three.js@dev/examples/js/MorphBlendMesh.js'></script>
<script src='https://cdn.jsdelivr.net/gh/mrdoob/three.js@dev/examples/js/MD2CharacterComplex.js'></script>
<script src='https://cdn.jsdelivr.net/gh/mrdoob/three.js@dev/examples/js/Gyroscope.js'></script>

<script src="https://threejs.org/examples/js/objects/Sky.js"></script>

<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://threejs.org/examples/js/objects/Water.js"></script>
<script src="https://threejs.org/examples/js/objects/Sky.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@2410ad1a8f5844df00191600eafda59def537830/examples/js/loaders/MTLLoader.js"></script>
<script...

CSS

body {
  color: #000;
  font-family: Monospace;
  font-size: 13px;
  text-align: center;
  font-weight: bold;
  background-color: #fff;
  margin: 0px;
  overflow: hidden;
}

#info {
  position: absolute;
  padding: 10px;
  width: 100%;
  text-align: center;
  color: #000;
}

a {
  color: skyblue;
}

JavaScript

class MD2Wrapper {
  constructor(config, controls, pos, scale = 1) {

    this.md2 = new THREE.MD2CharacterComplex();
    this.md2.scale = scale
    this.md2.controls = controls

    this.md2.onLoadComplete = function() {
      // here: 'this' is md2

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

      this.setWeapon(0);
      this.setSkin(0);

      //this.root.position.copy (pos);
      this.root.position.x = pos.x;
      this.root.position.z = pos.z;

      // y is automatically set, accoording to scale ...				
      console.log('y is ' + this.root.position.y)

      scene.add(this.root);

    }
    this.md2.loadParts(config);

  }
}


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

var container, stats;
var camera, scene, renderer;

var yoshiWrap, droidekaWrap;
var light;

var box3, box3Helper;
var theObject = new THREE.Object3D()
var tomato2 = new THREE.Object3D()
var cameraControls;
var clock = new THREE.Clock();

init();
animate();

function init() {

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

  // CAMERA

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

  // SCENE

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

  scene.add(camera);
  /////////////sky



  ////////////
  // LIGHTS

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

  light = new THREE.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 THREE.CameraHelper(...