Cursor Seek

by amitlzkpa

HTML

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

CSS

body {
  margin: 0px;
}

JavaScript

// Simple three.js example

let renderer, scene, camera, controls;

init();
animate();
function init() {
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    scene = new THREE.Scene();
    camera = new THREE.OrthographicCamera(
    	-(window.innerWidth/2), window.innerWidth/2,
      window.innerHeight/2, -(window.innerHeight/2),
      1, 1000);
    camera.position.set( 0, 20, 0 );
    camera.lookAt(new THREE.Vector3());
    //controls = new THREE.OrbitControls( camera, renderer.domElement );
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    let light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 20, 20, 0 );
    scene.add( light );
    scene.add( new THREE.AxesHelper( 20 ) );
    document.addEventListener('mousemove', onMouseMove, true);
    window.addEventListener( 'resize', onWindowResize, false );
}

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}

function onWindowResize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}



// --------------------------------------




// Cone
var geometry = new THREE.ConeGeometry( 10, 40, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cone = new THREE.Mesh( geometry, material );
cone.rotateX(Math.PI/2);

scene.add(cone);





// 3D cursor
geometry = new THREE.SphereGeometry( 10, 32, 32 );
material = new THREE.MeshBasicMaterial( {color: 0xff0000} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );





// callback for mouse movement
function onMouseMove(e) {

	// calculate point below mouse cursor in 3d space
  var mousePos = new THREE.Vector3();
  mousePos.set(
      (e.clientX/window.innerWidth)*2 - 1,
      -(e.clientY/window.innerHeight)*2 + 1,
      0);
 ...