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 class="main_wrapper">
	<div id="container" class="clearfix"></div>
</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 */
}

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;
	var params = {  //params for GUI
		SUBMIT: function () {
			if (objects.length > 1) {
				exportASCII();
			}
		},
		SUBMITGLTFE: function () {
			if (objects.length > 1) {
				exportGLTF();
			}
		},
		Geometry: 0,//选中的形状
		Cube: function () {
			changeShapes( 0 );
		},
		Cylinder: function () {
			changeShapes( 1 );
		},
		Cone: function () {
			changeShapes( 2 );
		},
		Ball: function () {
			changeShapes( 3 );
		},
		Doughnut: function () {
			changeShapes( 4 );
		},
		Standing: function () {
			loadSTL( 0 );
		},
		Climbing: function () {
			loadSTL( 1 );
		},
		Lying: function () {
			loadSTL( 2 );
		},
		Sitting: function () {
			loadSTL( 3 );
		},
		TyrannosaurusRex: function () {
			loadSTL( 4 );
		},

		color:...