You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
383 lines
10 KiB
383 lines
10 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>three.js webgl - lines - fat</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||
|
|
<link type="text/css" rel="stylesheet" href="main.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="container"></div>
|
||
|
|
|
||
|
|
<div id="info"><a href="https://threejs.org" target="_blank">three.js</a> - fat lines raycasting</div>
|
||
|
|
|
||
|
|
<!-- Import maps polyfill -->
|
||
|
|
<!-- Remove this when import maps will be widely supported -->
|
||
|
|
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
|
||
|
|
|
||
|
|
<script type="importmap">
|
||
|
|
{
|
||
|
|
"imports": {
|
||
|
|
"three": "../build/three.module.js",
|
||
|
|
"three/addons/": "./jsm/"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
|
||
|
|
import * as THREE from 'three';
|
||
|
|
|
||
|
|
import Stats from 'three/addons/libs/stats.module.js';
|
||
|
|
import { GPUStatsPanel } from 'three/addons/utils/GPUStatsPanel.js';
|
||
|
|
|
||
|
|
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
|
||
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||
|
|
import { LineMaterial } from 'three/addons/lines/LineMaterial.js';
|
||
|
|
import { LineSegments2 } from 'three/addons/lines/LineSegments2.js';
|
||
|
|
import { LineSegmentsGeometry } from 'three/addons/lines/LineSegmentsGeometry.js';
|
||
|
|
import { Line2 } from 'three/addons/lines/Line2.js';
|
||
|
|
import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
|
||
|
|
|
||
|
|
let line, thresholdLine, segments, thresholdSegments;
|
||
|
|
let renderer, scene, camera, camera2, controls;
|
||
|
|
let raycaster, sphereInter, sphereOnLine;
|
||
|
|
let matLine, matThresholdLine;
|
||
|
|
let stats, gpuPanel;
|
||
|
|
let gui;
|
||
|
|
|
||
|
|
// viewport
|
||
|
|
let insetWidth;
|
||
|
|
let insetHeight;
|
||
|
|
|
||
|
|
const pointer = new THREE.Vector2( Infinity, Infinity );
|
||
|
|
|
||
|
|
init();
|
||
|
|
animate();
|
||
|
|
|
||
|
|
function init() {
|
||
|
|
|
||
|
|
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
|
||
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
||
|
|
renderer.setClearColor( 0x000000, 0.0 );
|
||
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
||
|
|
document.body.appendChild( renderer.domElement );
|
||
|
|
|
||
|
|
scene = new THREE.Scene();
|
||
|
|
|
||
|
|
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
|
||
|
|
camera.position.set( - 40, 0, 60 );
|
||
|
|
|
||
|
|
camera2 = new THREE.PerspectiveCamera( 40, 1, 1, 1000 );
|
||
|
|
camera2.position.copy( camera.position );
|
||
|
|
|
||
|
|
controls = new OrbitControls( camera, renderer.domElement );
|
||
|
|
controls.minDistance = 10;
|
||
|
|
controls.maxDistance = 500;
|
||
|
|
|
||
|
|
raycaster = new THREE.Raycaster();
|
||
|
|
raycaster.params.Line2 = {};
|
||
|
|
raycaster.params.Line2.threshold = 0;
|
||
|
|
|
||
|
|
const sphereGeometry = new THREE.SphereGeometry( 0.25 );
|
||
|
|
const sphereInterMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, depthTest: false } );
|
||
|
|
const sphereOnLineMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00, depthTest: false } );
|
||
|
|
|
||
|
|
sphereInter = new THREE.Mesh( sphereGeometry, sphereInterMaterial );
|
||
|
|
sphereOnLine = new THREE.Mesh( sphereGeometry, sphereOnLineMaterial );
|
||
|
|
sphereInter.visible = false;
|
||
|
|
sphereOnLine.visible = false;
|
||
|
|
sphereInter.renderOrder = 10;
|
||
|
|
sphereOnLine.renderOrder = 10;
|
||
|
|
scene.add( sphereInter );
|
||
|
|
scene.add( sphereOnLine );
|
||
|
|
|
||
|
|
// Position and THREE.Color Data
|
||
|
|
|
||
|
|
const positions = [];
|
||
|
|
const colors = [];
|
||
|
|
const points = [];
|
||
|
|
for ( let i = - 50; i < 50; i ++ ) {
|
||
|
|
|
||
|
|
const t = i / 3;
|
||
|
|
points.push( new THREE.Vector3( t * Math.sin( 2 * t ), t, t * Math.cos( 2 * t ) ) );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
const spline = new THREE.CatmullRomCurve3( points );
|
||
|
|
const divisions = Math.round( 3 * points.length );
|
||
|
|
const point = new THREE.Vector3();
|
||
|
|
const color = new THREE.Color();
|
||
|
|
|
||
|
|
for ( let i = 0, l = divisions; i < l; i ++ ) {
|
||
|
|
|
||
|
|
const t = i / l;
|
||
|
|
|
||
|
|
spline.getPoint( t, point );
|
||
|
|
positions.push( point.x, point.y, point.z );
|
||
|
|
|
||
|
|
color.setHSL( t, 1.0, 0.5 );
|
||
|
|
colors.push( color.r, color.g, color.b );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
const lineGeometry = new LineGeometry();
|
||
|
|
lineGeometry.setPositions( positions );
|
||
|
|
lineGeometry.setColors( colors );
|
||
|
|
|
||
|
|
const segmentsGeometry = new LineSegmentsGeometry();
|
||
|
|
segmentsGeometry.setPositions( positions );
|
||
|
|
segmentsGeometry.setColors( colors );
|
||
|
|
|
||
|
|
matLine = new LineMaterial( {
|
||
|
|
|
||
|
|
color: 0xffffff,
|
||
|
|
linewidth: 1, // in world units with size attenuation, pixels otherwise
|
||
|
|
worldUnits: true,
|
||
|
|
vertexColors: true,
|
||
|
|
|
||
|
|
//resolution: // to be set by renderer, eventually
|
||
|
|
alphaToCoverage: true,
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
matThresholdLine = new LineMaterial( {
|
||
|
|
|
||
|
|
color: 0xffffff,
|
||
|
|
linewidth: matLine.linewidth, // in world units with size attenuation, pixels otherwise
|
||
|
|
worldUnits: true,
|
||
|
|
// vertexColors: true,
|
||
|
|
transparent: true,
|
||
|
|
opacity: 0.2,
|
||
|
|
depthTest: false,
|
||
|
|
visible: false,
|
||
|
|
//resolution: // to be set by renderer, eventually
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
segments = new LineSegments2( segmentsGeometry, matLine );
|
||
|
|
segments.computeLineDistances();
|
||
|
|
segments.scale.set( 1, 1, 1 );
|
||
|
|
scene.add( segments );
|
||
|
|
segments.visible = false;
|
||
|
|
|
||
|
|
thresholdSegments = new LineSegments2( segmentsGeometry, matThresholdLine );
|
||
|
|
thresholdSegments.computeLineDistances();
|
||
|
|
thresholdSegments.scale.set( 1, 1, 1 );
|
||
|
|
scene.add( thresholdSegments );
|
||
|
|
thresholdSegments.visible = false;
|
||
|
|
|
||
|
|
line = new Line2( lineGeometry, matLine );
|
||
|
|
line.computeLineDistances();
|
||
|
|
line.scale.set( 1, 1, 1 );
|
||
|
|
scene.add( line );
|
||
|
|
|
||
|
|
thresholdLine = new Line2( lineGeometry, matThresholdLine );
|
||
|
|
thresholdLine.computeLineDistances();
|
||
|
|
thresholdLine.scale.set( 1, 1, 1 );
|
||
|
|
scene.add( thresholdLine );
|
||
|
|
|
||
|
|
const geo = new THREE.BufferGeometry();
|
||
|
|
geo.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
|
||
|
|
geo.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
|
||
|
|
|
||
|
|
//
|
||
|
|
document.addEventListener( 'pointermove', onPointerMove );
|
||
|
|
window.addEventListener( 'resize', onWindowResize );
|
||
|
|
onWindowResize();
|
||
|
|
|
||
|
|
stats = new Stats();
|
||
|
|
document.body.appendChild( stats.dom );
|
||
|
|
|
||
|
|
gpuPanel = new GPUStatsPanel( renderer.getContext() );
|
||
|
|
stats.addPanel( gpuPanel );
|
||
|
|
stats.showPanel( 0 );
|
||
|
|
initGui();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function onWindowResize() {
|
||
|
|
|
||
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
|
||
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
||
|
|
|
||
|
|
insetWidth = window.innerHeight / 4; // square
|
||
|
|
insetHeight = window.innerHeight / 4;
|
||
|
|
|
||
|
|
camera2.aspect = insetWidth / insetHeight;
|
||
|
|
camera2.updateProjectionMatrix();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function onPointerMove( event ) {
|
||
|
|
|
||
|
|
pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
|
||
|
|
pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function animate() {
|
||
|
|
|
||
|
|
requestAnimationFrame( animate );
|
||
|
|
|
||
|
|
stats.update();
|
||
|
|
|
||
|
|
// main scene
|
||
|
|
|
||
|
|
renderer.setClearColor( 0x000000, 0 );
|
||
|
|
|
||
|
|
renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
|
||
|
|
|
||
|
|
raycaster.setFromCamera( pointer, camera );
|
||
|
|
|
||
|
|
// renderer will set this eventually
|
||
|
|
// set the new resolution before raycasting so it is set correctly
|
||
|
|
matLine.resolution.set( window.innerWidth, window.innerHeight ); // resolution of the viewport
|
||
|
|
matThresholdLine.resolution.set( window.innerWidth, window.innerHeight ); // resolution of the viewport
|
||
|
|
|
||
|
|
const obj = line.visible ? line : segments;
|
||
|
|
const intersects = raycaster.intersectObject( obj, true );
|
||
|
|
|
||
|
|
if ( intersects.length > 0 ) {
|
||
|
|
|
||
|
|
sphereInter.visible = true;
|
||
|
|
sphereOnLine.visible = true;
|
||
|
|
sphereInter.position.copy( intersects[ 0 ].point );
|
||
|
|
sphereOnLine.position.copy( intersects[ 0 ].pointOnLine );
|
||
|
|
const i = intersects[ 0 ].faceIndex;
|
||
|
|
const colors = obj.geometry.getAttribute( 'instanceColorStart' );
|
||
|
|
const color = new THREE.Color().setRGB( colors.getX( i ), colors.getY( i ), colors.getZ( i ) );
|
||
|
|
sphereInter.material.color.copy( color.clone().offsetHSL( 0.3, 0, 0 ) );
|
||
|
|
sphereOnLine.material.color.copy( color.clone().offsetHSL( 0.7, 0, 0 ) );
|
||
|
|
renderer.domElement.style.cursor = 'crosshair';
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
sphereInter.visible = false;
|
||
|
|
sphereOnLine.visible = false;
|
||
|
|
renderer.domElement.style.cursor = '';
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
gpuPanel.startQuery();
|
||
|
|
renderer.render( scene, camera );
|
||
|
|
gpuPanel.endQuery();
|
||
|
|
|
||
|
|
// inset scene
|
||
|
|
|
||
|
|
renderer.setClearColor( 0x222222, 1 );
|
||
|
|
|
||
|
|
renderer.clearDepth(); // important!
|
||
|
|
|
||
|
|
renderer.setScissorTest( true );
|
||
|
|
|
||
|
|
renderer.setScissor( 20, 20, insetWidth, insetHeight );
|
||
|
|
|
||
|
|
renderer.setViewport( 20, 20, insetWidth, insetHeight );
|
||
|
|
|
||
|
|
camera2.position.copy( camera.position );
|
||
|
|
camera2.quaternion.copy( camera.quaternion );
|
||
|
|
|
||
|
|
// renderer will set this eventually
|
||
|
|
matLine.resolution.set( insetWidth, insetHeight ); // resolution of the inset viewport
|
||
|
|
|
||
|
|
renderer.render( scene, camera2 );
|
||
|
|
|
||
|
|
renderer.setScissorTest( false );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
//
|
||
|
|
|
||
|
|
function switchLine( val ) {
|
||
|
|
|
||
|
|
switch ( val ) {
|
||
|
|
|
||
|
|
case 0:
|
||
|
|
line.visible = true;
|
||
|
|
thresholdLine.visible = true;
|
||
|
|
|
||
|
|
segments.visible = false;
|
||
|
|
thresholdSegments.visible = false;
|
||
|
|
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 1:
|
||
|
|
line.visible = false;
|
||
|
|
thresholdLine.visible = false;
|
||
|
|
|
||
|
|
segments.visible = true;
|
||
|
|
thresholdSegments.visible = true;
|
||
|
|
|
||
|
|
break;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function initGui() {
|
||
|
|
|
||
|
|
gui = new GUI();
|
||
|
|
|
||
|
|
const param = {
|
||
|
|
'line type': 0,
|
||
|
|
'world units': matLine.worldUnits,
|
||
|
|
'visualize threshold': matThresholdLine.visible,
|
||
|
|
'width': matLine.linewidth,
|
||
|
|
'alphaToCoverage': matLine.alphaToCoverage,
|
||
|
|
'threshold': raycaster.params.Line2.threshold
|
||
|
|
};
|
||
|
|
|
||
|
|
gui.add( param, 'line type', { 'LineGeometry': 0, 'LineSegmentsGeometry': 1 } ).onChange( function ( val ) {
|
||
|
|
|
||
|
|
switchLine( val );
|
||
|
|
|
||
|
|
} ).setValue( 1 );
|
||
|
|
|
||
|
|
gui.add( param, 'world units' ).onChange( function ( val ) {
|
||
|
|
|
||
|
|
matLine.worldUnits = val;
|
||
|
|
matLine.needsUpdate = true;
|
||
|
|
matThresholdLine.worldUnits = val;
|
||
|
|
matThresholdLine.needsUpdate = true;
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
gui.add( param, 'visualize threshold' ).onChange( function ( val ) {
|
||
|
|
|
||
|
|
matThresholdLine.visible = val;
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
gui.add( param, 'width', 1, 10 ).onChange( function ( val ) {
|
||
|
|
|
||
|
|
matLine.linewidth = val;
|
||
|
|
matThresholdLine.linewidth = matLine.linewidth + raycaster.params.Line2.threshold;
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
gui.add( param, 'alphaToCoverage' ).onChange( function ( val ) {
|
||
|
|
|
||
|
|
matLine.alphaToCoverage = val;
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
gui.add( param, 'threshold', 0, 10 ).onChange( function ( val ) {
|
||
|
|
|
||
|
|
raycaster.params.Line2.threshold = val;
|
||
|
|
matThresholdLine.linewidth = matLine.linewidth + raycaster.params.Line2.threshold;
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|