JSFiddle - React, Tailwind, and code Playground

by Alvin Chen

HTML

<div id="info">hw5 helper</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">


</script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, controls;
var vehicle;

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var pickables = [];

var pos, vel, force;
var angle = 0;
var uvOffsetArray = [];
var baseS = 0,
  baseT = 0;
var counter = 0;
var sprite;
var mass = 1;
var clock = new THREE.Clock();

var obCen = new THREE.Vector3(0,80,0);
var obCen1 = new THREE.Vector3(150,50,0);
var obCen2 = new THREE.Vector3(-150,50,0);
var obRad = 80;
var obRad2 = 40;
var obRad3 = 40;
var target = new THREE.Vector3();
var maxSpeed = 60;
var maxForce = 20;

init();
animate();

function setUpOffsetArray() {
  var rowCount = 4; // 4x8 sprites
  var colCount = 8;
  for (var i = 0; i < rowCount; i++) {
    var row = [];
    for (var j = 0; j < colCount; j++)
      row.push(new THREE.Vector2(j * 0.125, - 0.25 * i));
    uvOffsetArray.push(row);
  }
}

function buildSprite(texMat) {
  var geometry = new THREE.Geometry();
  geometry.vertices.push(
    new THREE.Vector3(-15, -15, 0),
    new THREE.Vector3(15, -15, 0),
    new THREE.Vector3(15, 15, 0),
    new THREE.Vector3(-15, 15, 0)
  );

  var face;
  face = new THREE.Face3(0, 1, 2);
  geometry.faces.push(face);
  face = new THREE.Face3(0, 2, 3);
  geometry.faces.push(face);

	// upper left corner
	var uv0 = new THREE.Vector2(0.0,0.75);
	var uv1 = new THREE.Vector2(0.125,0.75);
	var uv2 = new THREE.Vector2(0.125,1.0);
	var uv3 = new THREE.Vector2(0.0,1.0);
  
  geometry.faceVertexUvs[0].push([uv0, uv1, uv2]);
  geometry.faceVertexUvs[0].push([uv0, uv2, uv3]);

  geometry.computeBoundingSphere();
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();

  sprite = new THREE.Mesh(geometry, texMat);
  scene.add(sprite);

}

/*function buildPlane() {
  var missile = new THREE.Object3D();
  var normalMat = new THREE.MeshNormalMaterial();
	var tip = new THREE.Mesh (new THREE.CylinderGeometry (0,5,10,20), normalMat);
  var body = new THREE.Mesh (new THREE.CylinderGeometry (5,5,20,20), normalMat);
 	body.add (tip);
 ...