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;
}

JavaScript

var camera, scene, renderer;
var geometry, material, mesh, pointerMesh;
var t = 0;

init();
animate();


function init() {
		
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    renderer.domElement.onmouseup = mouseClicked
    
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;
    camera.position.y = 0.8;
    camera.lookAt(scene.position);

    

    geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    
    pointerMesh = new THREE.Mesh(
    	new THREE.SphereGeometry(0.05),
      new THREE.MeshBasicMaterial({color: 'red'})
    );
    pointerMesh.position.set(0.6, 0, 0);
    scene.add(pointerMesh);    

}

function animate() {

    requestAnimationFrame( animate );
		
    mesh.position.z = Math.sin(t);
    t += 0.005;
    
    renderer.render( scene, camera );

}

function mouseClicked(){
	var vec = new THREE.Vector3(); 
  var distance = camera.position.distanceTo( mesh.position );  

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

  vec.unproject( camera );

  vec.sub( camera.position ).normalize();

  pointerMesh.position.copy( camera.position ).add( vec.multiplyScalar( distance ) );
}