JSFiddle - React, Tailwind, and code Playground

by wayne6172

HTML

<div id="title">Game Homework5 Demo<br/>尚未做出轉彎與爬坡</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://jyunming-chen.github.io/game3js/js/ccdsys.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/Gyroscope.js"></script>

CSS

#title {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

JavaScript

var camera, scene, renderer, controls, stats, clock, ccdSys, gyro;
var L2 = 50,
  L1 = 45,
  Ls = 40,
  Fc = 10,
  Hr = 6,
  Hh = 91,
  Ts = 1,
  Vf = Ls / Ts;
var body;

class Lag {
  constructor(k, isRight) {
    this.theta1 = Math.PI / 2 * 3;
    this.theta2 = 0.1;
    this.targetX = isRight ? 0 : Ls * 2;
    this.targetY = 0;
    this.targetZ = isRight ? 10 : -10;


    this.upperLag = makeLeg(45);
    this.lowerLag = makeLeg(50);

    this.upperLag.add(this.lowerLag);

    this.lowerLag.position.set(45, 0, 0);
    this.upperLag.position.set(0, 95, k);

    this.upperLag.rotation.z = this.theta1;
    this.lowerLag.rotation.z = this.theta2;

    scene.add(this.upperLag);

    this.targetMesh = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), new THREE.MeshBasicMaterial({
      color: 0xff0000
    }));
    scene.add(this.targetMesh);
  }

  update() {
    var thetas = [this.theta1, this.theta2];
    this.target = new THREE.Vector3(this.targetX, this.targetY, this.targetZ).sub(this.upperLag.position);
    this.targetMesh.position.set(this.targetX, this.targetY, this.targetZ);

    ccdSys.solve(this.target, thetas);

    this.theta1 = thetas[0];
    this.theta2 = thetas[1];

    this.upperLag.rotation.z = this.theta1;
    this.lowerLag.rotation.z = this.theta2;
  }
}

class Body {
  constructor() {
    this.rightLag = new Lag(10, true);
    this.leftLag = new Lag(-10, false);

    this.light = new THREE.DirectionalLight(0xffffff);
    this.light.castShadow = true;
    this.light.position.set(150, 150, 150);
    this.light.shadow.camera.left = -200;
    this.light.shadow.camera.right = 200;
    this.light.shadow.camera.top = -200;
    this.light.shadow.camera.bottom = 200;
    this.light.shadow.camera.near = 1;
    this.light.shadow.camera.far = 800;
    this.light.shadow.bias = -0.01;
    this.light.shadow.mapSize.width = this.light.shadow.mapSize.height = 2048;

    this.body = new THREE.Mesh(new THREE.BoxGeometry(10, 30, 10), new THREE.MeshPhongMaterial({
     ...