Raycast - Line

simple recast-to-line example

by Chrisssie

CSS

body {
    margin: 0;
    background-color: #000;
    color: #000;
    font-family: Monospace;
    font-size: 13px;
    line-height: 24px;
    overscroll-behavior: none;
}

a {
    color: #ff0;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    cursor: pointer;
    text-transform: uppercase;
}

canvas {
    display: block;
}

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
    pointer-events: auto;
}

.dg.ac {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 2 !important; /* TODO Solve this in HTML */
}

#overlay {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
}

    #overlay button {
        background: #ffffff;
        border: 0;
        color: #000000;
        padding: 16px 20px;
        text-transform: uppercase;
        cursor: pointer;
    }

#notSupported {
    width: 50%;
    margin: auto;
    background-color: #f00;
    margin-top: 20px;
    padding: 10px;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/[email protected]";
import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";


let camera, scene, raycaster, renderer, parentTransform, sphereInter;

const pointer = new THREE.Vector2();

init();
animate();

function init() {

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

	camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100 );
	camera.position.x = 0;
	camera.position.y = 0;
	camera.position.z = 1;
	camera.lookAt( scene.position );

	const geometry = new THREE.SphereGeometry( 1, 16, 8 );
	const material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true	} );

	sphereInter = new THREE.Mesh( geometry, material );
	sphereInter.visible = false;
	scene.add( sphereInter );

	const lineGeometry = new THREE.BufferGeometry();
	const points = [];

	points.push( 0, 0, -20 );
	points.push( 100, 50, -200 );

	lineGeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( points, 3 ) );
	const lineMaterial = new THREE.LineBasicMaterial( { color: 0x0000ff } );
	let line = new THREE.Line( lineGeometry, lineMaterial );

	parentTransform = new THREE.Object3D();
	parentTransform.add( line );

	scene.add( parentTransform );

	raycaster = new THREE.Raycaster();
	raycaster.params.Line.threshold = 1;

  renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	document.addEventListener( 'pointermove', onPointerMove );

	//

	window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}

function onPointerMove( event ) {

	pointer.x = ( event.clientX /...