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/postprocessing/EffectComposer.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/OutlinePass.js'></script>
<script src='https://threejs.org/examples/js/shaders/CopyShader.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/ShaderPass.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/RenderPass.js'></script>
<script src='https://threejs.org/examples/js/shaders/FXAAShader.js'></script>
<script src='https://threejs.org/examples/js/controls/TransformControls.js'></script>
<div id="container" class="clearfix"></div>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}
#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 */
}

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;
  //LDraw
	var lDrawModul;
	var lDrawModulGUI;
	var progressBarDiv;
	var lDrawGuiData = {
		smoothNormals: true,
		separateObjects: true,
		constructionStep: 0,
		noConstructionSteps: "无步骤"
	};
	//LDraw  end
	var currentModule = 0; //0:基础模型 1：lego

	init();
	render();
  function init() {
		renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
		// renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setPixelRatio( ( window.devicePixelRatio ) ? window.devicePixelRatio : 1 );
		renderer.setSize( window.innerWidth, window.innerHeight );
		renderer.shadowMap.enabled = true;
		renderer.autoClear = false;
		renderer.setClearColor( 0x000000, 0.0 );
		container.appendChild( renderer.domElement );

		camera = new THREE.PerspectiveCamera( 45,...