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>
  

</div>
<script src="https://threejs.org/build/three.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r113/three.js"></script>

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


<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@2410ad1a8f5844df00191600eafda59def537830/examples/js/loaders/MTLLoader.js"></script>

<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@2410ad1a8f5844df00191600eafda59def537830/examples/js/loaders/OBJLoader.js"></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

import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import { Water } from "https://threejs.org/examples/jsm/objects/Water.js";
import { Sky } from "https://threejs.org/examples/jsm/objects/Sky.js";
import { WEBGL } from "https://threejs.org/examples/jsm/WebGL.js";



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();
var water

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;
 ...