JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="threejs" style="position: absolute; left:0px; top:0px"></div>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var boards = [];
var texture = [];
var matTexture = [];
var container;
var projector;

init();
animate();

//...........................

function init() {

  projector = new THREE.Projector();
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 300000);
  scene.add(camera);
  camera.position.set(0, 1500, 5000);
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0xeeeeee);
  container = document.getElementById('threejs');
  container.appendChild(renderer.domElement);
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  texture[0] = new THREE.TextureLoader().load("https://i.imgur.com/244nxmA.png");

  matTexture[0] = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    map: texture[0],
    transparent: true,
    opacity: 1,
    wireframe: false
  });

  // ball
  materialSph = new THREE.MeshBasicMaterial({
    color: 0x0099dd,
    transparent: true,
    opacity: 0.8,
    wireframe: false
  });
  sphGeo = new THREE.SphereGeometry(1200, 8, 8);
  sphere = new THREE.Mesh(sphGeo, materialSph);
  scene.add(sphere);

  // board for some things	
  materialBoard = new THREE.MeshBasicMaterial({
    color: 0xdddddd,
    transparent: true,
    opacity: 0.4,
    wireframe: true
  });
  boardGeo = new THREE.PlaneGeometry(500, 500);

  picGeo = new THREE.PlaneGeometry(500, 500);

  board = new THREE.Mesh(boardGeo, materialBoard); // board for pictures etc.  
  board.userData = {
    URL: "http://stackoverflow.com"
  };
  pic = new THREE.Mesh(picGeo, matTexture[0]);
  board.add(pic); //  add picture to the board


  boards.push(board);

  scene.add(boards[0]);

  boards[0].position.set(1 * sphGeo.vertices[10].x, 0.5 * sphGeo.vertices[2].y, 1.8 * sphGeo.vertices[10].z);


  document.addEventListener('mousedown', onDocumentMouseDown, false);
}

var mouse = new THREE.Vector2();
var raycaster = new...