JSFiddle - React, Tailwind, and code Playground

by Prom36

HTML

<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body>

      


<div id="slider-container">
   <input type="range" min="-450" max="450" value="0" class="slider" id="slider">
</div>



    
  


</body>
</html>

CSS

body,
html {
  margin: 0%;
  padding: 0%;
}


#slider-container {
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  background-color: cyan;
  display: flex;
  align-items: center;
}


#slider {
  width: 30%;
  height: 100%;
  margin: auto;
  /* appearance: none; */
  /* outline: none; */
}



#canvasTwoDIV {
  position: absolute;
  top: 10px;
  right: 30px;

  width: 600px;
  height: 400px;

  background-color: blue;
  color: white;

  display: none;
}


#detailsCanvas {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 500px;
  height: 300px;
  background-color: black;
}


#instruct {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: black;
  color: white;
  padding: 5px;
}

JavaScript

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.module.js';

import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.125.2/examples/jsm/controls/OrbitControls.js';

let container;
let camera, scene, renderer, rayCaster, controls;
let objectsForRayCasterArray = [];
let mouseX, mouseY;
var mousePositionVector = new THREE.Vector2();


let planesArray = [];




init();
animate();




function init() {
  console.log(" --In 'init()'!");
  
  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(600, 250, 300);

  scene = new THREE.Scene();
  scene.background = new THREE.Color( "white" );

  rayCaster = new THREE.Raycaster();

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.outputEncoding = THREE.sRGBEncoding;
  document.body.appendChild( renderer.domElement );

  controls = new OrbitControls( camera, renderer.domElement );


  const light1 = new THREE.DirectionalLight( 0xefefff, 1.5 );
  light1.position.set( 1, 1, 1 ).normalize();
  scene.add( light1 );

  /* const light2 = new THREE.DirectionalLight( 0xffefef, 1.5 );
  light2.position.set( - 1, - 1, - 1 ).normalize(); */
  /* scene.add( light2 ); */
  

  window.addEventListener( 'resize', onWindowResize );
  /* window.addEventListener("pointerdown", onPointerDown, false); */
  //window.addEventListener("mousemove", onMouseMove, false);
  
  
  planesArray = [];

}


function makeImagePlane(imageName, zCoordinate) {
 /*  console.log("Making a plane for: ", imageName); */
  // 1. Create a TextureLoader to load the image file:
  var imageLoader = new THREE.TextureLoader();

  // 2. Load an image file into a custom material:
  var imageMaterial = new THREE.MeshBasicMaterial({
     map: imageLoader.load(imageName),
     side: THREE.DoubleSide,
     transparent: true,
     opacity: 0.85,
     color:...