three.js dev template - module

by nicolasrannou

CSS

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

JavaScript

// Simple three.js example

import * as THREE from "https://rawgit.com/mrdoob/three.js/dev/build/three.module.js";
import { OrbitControls } from "https://rawgit.com/mrdoob/three.js/dev/examples/jsm/controls/OrbitControls.js";

var mesh, renderer, scene, camera, controls, sphereInter, object;
var mouse = {x :0,  y: 0};

const raycaster = new THREE.Raycaster();
raycaster.linePrecision = .3;

init();
animate();

function onDocumentMouseMove( event ) {

    event.preventDefault();

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    camera.updateMatrixWorld();

		// find intersections

		raycaster.setFromCamera( mouse, camera );

		var intersects = raycaster.intersectObject( object, true );
    
    var closestIntersection;
    // re-compute distances and keep the closest
    

				if ( intersects.length > 0 ) {
        window.console.log(intersects);
        intersects.forEach((inter) => {
                window.console.log(inter);

          const distance = raycaster.ray.distanceToPoint( inter.point );
          
          window.console.log(distance);
          if (closestIntersection === undefined || closestIntersection.distance > distance) {
          closestIntersection = inter;
          }
        })
}
if (closestIntersection) {


					sphereInter.visible = true;
					sphereInter.position.copy( closestIntersection.point );

				} else {

					sphereInter.visible = false;

				}
}

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x006666 );

    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set(0, 0, 50 );

    //...