JSFiddle - React, Tailwind, and code Playground

by Paul West

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>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var objHidden = true;
var objHidden1 = true;
var objects = [];
var selectedObject;
var loader1 = new THREE.OBJLoader();

var properties = [{
      position: {
        x: -2,
        y: 0,
        z: 0
      },
    color: 0xff0000
  },
  {
    position: {
      x: 2,
      y: 0,
      z: 0
    },
    color: 0xddaa00
  }];

loader1.load(
  'https://dl.dropboxusercontent.com/s/pn3yw6w5962o5r8/BIGIPIGI.obj',
  function(object) {
    properties.forEach(function(p, idx){
      let o = object.children[0].clone();
      let mat = o.material.clone();
      mat.color.setHex(p.color);
      o.material = mat;
      o.scale.set(0.5, 0.5, 0.5);
      o.position.copy(p.position);
      o.visible = false;
      o.name = "object" + idx;
      scene.add(o);
      objects.push(o);
      console.log("log");
    })
  });


document.getElementById("hideShow").addEventListener("click", function() {
  objects.forEach(function(o) {
    o.visible = !o.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;
 ...