JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://rawcdn.githack.com/schteppe/cannon.js/327157344faa2750cf25e40712459b82d7126dab/build/cannon.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/Stats.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://threejs.org/examples/js/modifiers/SimplifyModifier.js"></script>

JavaScript

var world;
        var dt = 1 / 60;
				 var verts = []
        var constraintDown = false;
        var camera, scene, renderer, gplane=false, clickMarker=false;
        var geometry, material, mesh;
        var controls,time = Date.now();
		var stats;
        var jointBody, constrainedBody, mouseConstraint;

        var N = 1;

        var container, camera, scene, renderer, projector;
				var groundmesh;
        // To be synced
        var meshes=[], bodies=[];

        // Initialize Three.js
        //if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        initCannon();
        init();
        animate();

        function init() {

            projector = new THREE.Projector();

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            // scene
            scene = new THREE.Scene();
            scene.fog = new THREE.Fog( 0x000000, 500, 10000 );

            // camera
            camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 0.5, 10000 );
            camera.position.set(10, 2, 0);
            camera.quaternion.setFromAxisAngle(new THREE.Vector3(0,1,0), Math.PI/2);
            scene.add(camera);

            // lights
            var light, materials;
            scene.add( new THREE.AmbientLight( 0x666666 ) );

            light = new THREE.DirectionalLight( 0xffffff, 1.75 );
            var d = 20;

            light.position.set( d, d, d );

          

            scene.add( light );

stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';
	stats.domElement.style.zIndex = 100;
	container.appendChild( stats.domElement );
  
  var controls = new THREE.OrbitControls(camera);
            // floor
            
            markerMaterial = new THREE.MeshLambertMaterial( { color: 0xff0000 } );
            //THREE.ColorUtils.adjustHSV( material.color, 0, 0, 0.9 );
            geometry = new THREE.PlaneGeometry(...