JSFiddle - React, Tailwind, and code Playground

by Stéphane Cabaret

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
	<script src="https://cdn.rawgit.com/mrdoob/three.js/r71/build/three.js"></script>
	<script src="https://cdn.rawgit.com/mrdoob/three.js/r71/examples/js/loaders/OBJLoader.js"></script>
	<script src="https://cdn.rawgit.com/mrdoob/three.js/r71/examples/js/controls/OrbitControls.js"></script>

		<button type="button" style="z-index: 12345;position: absolute;margin-left: 50%;" id="hideShow">Hide / Show!</button>

JavaScript

var objHidden = true;

var loader1 = new THREE.OBJLoader();
// load a resource
loader1.load(
	// resource URL
	'https://dl.dropboxusercontent.com/s/pn3yw6w5962o5r8/BIGIPIGI.obj',
	// called when resource is loaded
	function ( object ) {
		scene.add(object);
		object.scale.set(2.15,2.15,2.15);
		object.position.set(-4.5, 5.3, 5.6);

		object.traverse( function ( child ) {
			if ( child instanceof THREE.Mesh ) {
				//child.material.ambient.setHex(0xFF0000);
				child.material.color.setHex(0xaa0000);
			}
		} );
		
		object.visible = false;

		document.getElementById("hideShow").addEventListener("click", function(){
			if(objHidden) {
				objHidden = false;
				// code to show object

				object.visible = true;
			} else {
				objHidden = true;
				// code to hide object
				
				object.visible = false;
			}
		});
	},		
);



var container;
var camera, scene, renderer, controls;
var raycaster;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
var  target;
var pathLines;
function init() {
	container = document.createElement( 'div' );
	document.body.appendChild( container );

	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
	camera.position.x = -10;
	camera.position.y = 14;
	camera.position.z = 10;
	scene = new THREE.Scene();

	var directionalLight = new THREE.DirectionalLight( );
	directionalLight.position.set( 0, 0.5, 0.5 );
	scene.add( directionalLight );

	// background
	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setClearColor(0xffffff);
	container.appendChild( renderer.domElement );
	raycaster = new THREE.Raycaster();
	controls = new THREE.OrbitControls( camera );
	controls.damping = 0.2;
}


function onWindowResize() {
	windowHalfX = window.innerWidth / 2;
	windowHalfY = window.innerHeight / 2;
	camera.aspect = window.innerWidth /...