JSFiddle - React, Tailwind, and code Playground

by bumpyshot

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.js"></script>
<script>
var minPan = new THREE.Vector3( - 20, - 20, - 20 );
var maxPan = new THREE.Vector3( 20, 20, 20 );

THREE.OrbitControls = function ( object, domElement ) {

	if ( domElement === undefined ) console.warn( 'THREE.OrbitControls: The second parameter "domElement" is now mandatory.' );
	if ( domElement === document ) console.error( 'THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );

	this.object = object;
	this.domElement = domElement;

	// Set to false to disable this control
	this.enabled = true;

	// "target" sets the location of focus, where the object orbits around
	this.target = new THREE.Vector3();

	// How far you can dolly in and out ( PerspectiveCamera only )
	this.minDistance = 0;
	this.maxDistance = Infinity;

	// How far you can zoom in and out ( OrthographicCamera only )
	this.minZoom = 0;
	this.maxZoom = Infinity;

	// How far you can orbit vertically, upper and lower limits.
	// Range is 0 to Math.PI radians.
	this.minPolarAngle = 0; // radians
	this.maxPolarAngle = Math.PI; // radians

	// How far you can orbit horizontally, upper and lower limits.
	// If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI )
	this.minAzimuthAngle = - Infinity; // radians
	this.maxAzimuthAngle = Infinity; // radians

	// Set to true to enable damping (inertia)
	// If damping is enabled, you must call controls.update() in your animation loop
	this.enableDamping = false;
	this.dampingFactor = 0.05;

	// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
	// Set to false to disable zooming
	this.enableZoom = true;
	this.zoomSpeed = 1.0;

	// Set to false to disable rotating
	this.enableRotate = true;
	this.rotateSpeed = 1.0;

	// Set to false to disable panning
	this.enablePan = true;
	this.panSpeed =...

CSS

body{
    margin:0; 
    height: 100vh;
}

canvas {
    display: block;
}

JavaScript

var camera, scene, renderer,
  particle1, particle2,
  light, spotlight, object, lightHelper, loader, plane, planeGeometry;


const mouse = new THREE.Vector2();
const target = new THREE.Vector2();
const windowHalf = new THREE.Vector2( window.innerWidth / 2, window.innerHeight / 2 );

init();
animate();
control();

function init() {
  scene = new THREE.Scene();
  camera = new THREE.OrthographicCamera( window.innerWidth / - 50, window.innerWidth / 50, window.innerHeight / 50, window.innerHeight / -50, - 500, 1000); 
  
  renderer = new THREE.WebGLRenderer();
  //renderer.setClearColor(0xEEEEEE, 1);
  renderer.shadowMap.enabled = true;
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor("#e5e5e5");
   document.body.appendChild(renderer.domElement);


    planeGeometry = new THREE.PlaneGeometry(6,8);
    var texture = new THREE.TextureLoader().load( '/img/IMG_3302.jpg' );
    var planeMaterial = new THREE.MeshLambertMaterial( { map: texture } );
    plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.position.x = -5;
    scene.add(plane);

    planeGeometry2 = new THREE.PlaneGeometry(6,8);
    var texture2 = new THREE.TextureLoader().load( '/img/IMG_3302.jpg' );
    var planeMaterial2 = new THREE.MeshLambertMaterial( { map: texture2 } );
    plane2 = new THREE.Mesh(planeGeometry2, planeMaterial2);
    scene.add(plane2);
    plane2.position.x = 5;

  var ambiColor = "#FFFFFF";
  ambientLight = new THREE.AmbientLight(ambiColor);
  scene.add(ambientLight);

  sphere = new THREE.SphereGeometry(0.5, 16, 8);

  camera.position.z = 360;
  camera.position.y = 0;
  camera.position.x = 130;
/*   let vector = {
    x : 20,
    y : 25,
    z : 32
  }; */
  document.addEventListener( 'mousemove', onMouseMove, false );



}

function onMouseMove( event ) {

	mouse.x = ( event.clientX - windowHalf.x );
	mouse.y = ( event.clientY - windowHalf.x );

}

function animate() {
  requestAnimationFrame(animate);
  target.x = ( 1 - mouse.x ) *...