JSFiddle - React, Tailwind, and code Playground

by chuby0307

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="http://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="http://jyunming-chen.github.io/tutsplus/lineUtil.js"></script>
<script src="http://jyunming-chen.github.io/tutsplus/js/Detector.js"></script>

<div id="info">
	<a href="javascript:log();">change mode</a>
</div>

CSS

body {
    background-color: #fff;
    color: #111;
    margin: 0px;
    overflow: hidden;
    font-family: Monospace;
    font-size: 20px;
    position: absolute;
}
#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 5px;
    text-align: center;
    color: #444400
}
#info2 {
    position: absolute;
    bottom: 50px;
    width: 100%;
    text-align: center;
    color: #444400
}
a {
    color: 0x005500
}

JavaScript

var scene, renderer, camera;
var plane, cyl;
var mouse = new THREE.Vector2();
var keyboard = new KeyboardState();
var clock = new THREE.Clock();

var cube,dot,target;

var line;
var to = false;
var to2 = false;

var nolineyet = true;

var ss;

var zero = (0, 0, 0);

var xx = [];
var yy = [];
var zz = 0;

var timeOut = null;

var mesh;
var mesh2;
var vel = new THREE.Vector3(-10, 0, 0);
var vel1 = new THREE.Vector3(0, 0, 0);
var vel2 = new THREE.Vector3(-10, 0, 10);

//attack
var avel = new THREE.Vector3(-1, 0, 0);
var avel1 = new THREE.Vector3(0, 0, 0);
var avel2 = new THREE.Vector3(0, 0, 0);

var z0 = new THREE.Vector3(10, 0, -10);
var z1 = new THREE.Vector3(-10, 0, -10);
var z2 = new THREE.Vector3(-10, 0, 10);
var z3 = new THREE.Vector3(10, 0, 10);

var poss = new THREE.Vector3(0, 0, 0);
var change=new THREE.Vector3(0, 0, 0);
var dt =0;

var objects = [], plane;
var offset = new THREE.Vector3();
var INTERSECTED, SELECTED;

var raycaster;

var v1 = new THREE.Vector3(-1, 0, 0);

init();
animate();

var changemode = true;

function log() {
	changemode = !changemode;
	switch (changemode) {
		case true:
			clock.stop();
			break;
		default:
			break;
    }
}

function init() {
    var width = window.innerWidth;
    var height = window.innerHeight;

    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(width, height);
    renderer.setClearColor(0x888800);

    document.body.appendChild(renderer.domElement);
    
    scene = new THREE.Scene();

    //camera = new THREE.OrthographicCamera(-15, 15, 15, -15, 1, 1000);
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.x = 0;
    camera.position.y = 15;
    camera.position.z = 0;
    camera.up.set(0, 0, -1);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    //scene.add(camera);
    
    var gridXZ = new THREE.GridHelper(12, 1);
    gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
   ...