JSFiddle - React, Tailwind, and code Playground

2012-01-05 ~

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

var width = window.innerWidth;
var height = window.innerHeight;

//RENDERER
var renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(width, height);
renderer.setClearColor(0xFFFFFF);

document.body.appendChild(renderer.domElement);

//SCENE
var scene = new THREE.Scene;

var cubeGeometry = new THREE.BoxGeometry(100, 100, 100);
//MATERIAL
var cubeMaterial = new THREE.MeshLambertMaterial({
    color: 0x1ec876
});

//MESH
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

cube.rotation.y = Math.PI * 45 / 180;

//ADD MESH TO SCENE
scene.add(cube);

var camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); // avoid tiny values for near plane

//The z coordinate is positive in the direction of the viewer, so objects with a higher z position will appear closer to you
camera.position.y = 500;
camera.position.z = 500;

camera.lookAt(cube.position);

//scene.add(camera); // not required

//ADDS A POINT OF LIGHT
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 300, 200);

scene.add(pointLight);

var geometry = new THREE.CylinderGeometry(0, 20, 100, 3);
geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 50, 0));
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI / 2));
var tracer = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
scene.add(tracer);

var mouse = new THREE.Vector2();
var vector = new THREE.Vector3();

function onMouseMove(event) {

    mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;

    mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;

    vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );

    vector.unproject( camera );
    
    var dir = vector.sub( camera.position ).normalize();

    var distance = - camera.position.z / dir.z;

    tracer.position.copy( camera.position ).add( dir.multiplyScalar( distance ) );

}

window.addEventListener('mousemove',...