JSFiddle - React, Tailwind, and code Playground

by jxnx888

HTML

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src='https://threejs.org/build/three.js'></script>
<script src='https://threejs.org/examples/js/controls/OrbitControls.js'></script>
<script src='https://threejs.org/examples/js/controls/DragControls.js'></script>
<script src='https://threejs.org/examples/js/controls/TransformControls.js'></script>
<script src='https://threejs.org/examples/js/libs/ammo.js'></script>
<div class="main_wrapper">
	<div id="container" class="clearfix"></div>
</div>
<div id="transform"  onclick="changeControls(1,this)">transform</div>
<div id="scale" onclick="changeControls(0,this)">scale</div>
<div id="rotate" onclick="changeControls(2,this)">rotate</div>

CSS

#container {
    background: #FFF4AF; /* Old browsers */
    background: -moz-linear-gradient(top,  #FFF4AF 0%, #FFE548 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #FFF4AF 0%,#FFE548 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #FFF4AF 0%,#FFE548 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF4AF', endColorstr='#FFE548',GradientType=0 ); /* IE6-9 */
}

#transform{position:fixed;top:10px;left:100px;right:0;width:100px;height:50px;line-height:50px;
background:#000;z-index:99;color:#fff;text-align:center}
#scale{position:fixed;top:10px;left:200px;right:0;width:100px;height:50px;line-height:50px;
background:#79B1EA;z-index:99;color:#fff;text-align:center}
#rotate{position:fixed;top:10px;left:300px;right:0;width:100px;height:50px;line-height:50px;
background:#000;z-index:99;color:#fff;text-align:center}

JavaScript

var mobile = true;
	var container = document.getElementById( 'container' ); //
	var camera, scene, renderer;
	var cameraZoom = 1;
	var outlinePass, composer, effectFXAA;
	var plane;
	var gridHelper, gradGroundMesh, gradGroundMesh1;
	var mouse, raycaster, isShiftDown = false;
	var controls;
	var mouseHelper, mouseHelperMaterial;
	var cubeGeo, cubeMaterial;
	var controlsMoved = false;
	var objects = [];
	var currentObj; //当前形状
	var currentObjMaterial = new THREE.MeshLambertMaterial( { color: 0xdddddd } );
	var currentShapeType;
	var currentColor;
	var currentColorFlag = 0;
	var currentObjMesh; //当前obj mesh
	var shapeHelperObjects = [];
	var shapesObj = []; //所有的当前已放置的obj
	var currentAllObjs = []; //所有的当前已放置的obj
	var transformControl;
	var transformControlModeType = 1;
	var transformControlMove = false;
	var focusedTransformObj;
	var intersectsSelect = [];
	var intersection = {
		intersects: false,
		point: new THREE.Vector3(),
		normal: new THREE.Vector3()
	};
	var allOperation = [];//all the operated operation(undo)
	var redoOperation = [];//all the redo operation
	var eachObjectInfo = {};//每一个对象的每一个步骤；
	var eachRedoObjectInfo = {};//每一个对象的每一个步骤；
	var undoArr = [];
	var redoArr = [];
	var shootedFlag = false;


	var DEGTORAD = THREE.Math.DEG2RAD;
	 

	//LDraw
	var lDrawModul;
	var lDrawModulGUI;
	var progressBarDiv;
	var lDrawGuiData = {
		smoothNormals: true,
		separateObjects: true,
		constructionStep: 0,
		noConstructionSteps: "无步骤"
	};
	//LDraw  end
	var currentModule = 0; //0:基础模型 1：lego
  
// Physics variables
var gravityConstant = 7.8;
var collisionConfiguration;
var dispatcher;
var broadphase;
var solver;
var physicsWorld;
var dynamicObjects = [];
var time = 0;
var margin = 0.05;
// Rigid bodies include all movable objects
var rigidBodies = [];
var clock = new THREE.Clock();
var pos = new THREE.Vector3();
var quat = new THREE.Quaternion();
var transformAux1;
var tempBtVec3_1;
var WORK_SPACE_SIZE = 300;
var SHAPE_SIZE = 50;
	Ammo().then( function ( AmmoLib...