JSFiddle - React, Tailwind, and code Playground

by EthanHermsey

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

CSS

body {
	  margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

JavaScript

let raycaster = new THREE.Raycaster();
let renderer = null;
let scene = null;
let camera = null;
let mouse = new THREE.Vector2();
let selectedLever = null;
let lever = null;

init();
animate();

function init() {
		
    //binding mouse events
		document.addEventListener('mousemove', onDocumentMouseMove );
    document.addEventListener('mousedown', catchLever );
    document.addEventListener('mouseup', releaseLever );

		//setup scene, camera and renderer
		scene = new THREE.Scene();
		
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 100 );
    camera.position.x = -0.5;
    camera.position.z = 2;
    camera.position.y = 1;
    camera.lookAt(scene.position);
    
		renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.shadowMap.enabled = true;
    document.body.appendChild( renderer.domElement );
    
    //add lights.
    let dLight = new THREE.DirectionalLight(0xffffff, 1);
    dLight.position.set( 20, 20, 20);
    dLight.castShadow = true;
    scene.add( dLight );
    
    let aLight = new THREE.AmbientLight(0xffffff, 0.1)
    scene.add( aLight );
    
    
    //add a ground.
    let groundGeo = new THREE.PlaneGeometry( 10, 10 );
    let groundMat = new THREE.MeshLambertMaterial({color: 'grey'})    
    let ground = new THREE.Mesh(groundGeo, groundMat);
    ground.rotateX(-Math.PI/2);
    ground.receiveShadow = true;
    scene.add(ground);
    
    
    //lever
    let leverGeo = new THREE.BoxGeometry(0.1, 1, 0.1);
    leverGeo.translate(0, 0.5, 0); 
    //normally the rotation center is in the middle, move the lever up to make it rotate on the end.
    let leverMat = new THREE.MeshLambertMaterial({color: 'blue'});
    lever = new THREE.Mesh(leverGeo, leverMat);   
    lever.isLever = true;
    lever.castShadow = true;
    scene.add(lever);
    

}

function onDocumentMouseMove( event...