JSFiddle - React, Tailwind, and code Playground
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 objHidden1 = 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(0.5,0.5,0.5);
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 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(0.5,0.5,0.5);
object.position.set(-6.5, 5.3, 5.6);
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
//child.material.ambient.setHex(0xFF0000);
child.material.color.setHex(0xddaa00);
}
} );
object.visible = false;
document.getElementById("hideShow").addEventListener("click", function(){
if(objHidden1) {
objHidden1 = false;
// code to show object
object.visible = true;
} else {
objHidden1 = 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...