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>

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, 0.1, 10000);

//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);

//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,
        100 );
    
    var dir = vector.sub( camera.position ).normalize();
    
    var distance = - camera.position.z / dir.z;
    
    var pos = camera.position.clone().add( dir.multiplyScalar( distance     ) );
    console.log('pos is ');
    console.log(pos);

   ...