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.
412 lines
9.9 KiB
412 lines
9.9 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - geometry - catmull spline editor</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">
|
|
<style>
|
|
body {
|
|
background-color: #f0f0f0;
|
|
color: #444;
|
|
}
|
|
a {
|
|
color: #08f;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="container"></div>
|
|
<div id="info">
|
|
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - geometry - catmull spline editor
|
|
</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 { GUI } from 'three/addons/libs/lil-gui.module.min.js';
|
|
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
import { TransformControls } from 'three/addons/controls/TransformControls.js';
|
|
|
|
let container;
|
|
let camera, scene, renderer;
|
|
const splineHelperObjects = [];
|
|
let splinePointsLength = 4;
|
|
const positions = [];
|
|
const point = new THREE.Vector3();
|
|
|
|
const raycaster = new THREE.Raycaster();
|
|
const pointer = new THREE.Vector2();
|
|
const onUpPosition = new THREE.Vector2();
|
|
const onDownPosition = new THREE.Vector2();
|
|
|
|
const geometry = new THREE.BoxGeometry( 20, 20, 20 );
|
|
let transformControl;
|
|
|
|
const ARC_SEGMENTS = 200;
|
|
|
|
const splines = {};
|
|
|
|
const params = {
|
|
uniform: true,
|
|
tension: 0.5,
|
|
centripetal: true,
|
|
chordal: true,
|
|
addPoint: addPoint,
|
|
removePoint: removePoint,
|
|
exportSpline: exportSpline
|
|
};
|
|
|
|
init();
|
|
|
|
function init() {
|
|
|
|
container = document.getElementById( 'container' );
|
|
|
|
scene = new THREE.Scene();
|
|
scene.background = new THREE.Color( 0xf0f0f0 );
|
|
|
|
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
camera.position.set( 0, 250, 1000 );
|
|
scene.add( camera );
|
|
|
|
scene.add( new THREE.AmbientLight( 0xf0f0f0 ) );
|
|
const light = new THREE.SpotLight( 0xffffff, 1.5 );
|
|
light.position.set( 0, 1500, 200 );
|
|
light.angle = Math.PI * 0.2;
|
|
light.castShadow = true;
|
|
light.shadow.camera.near = 200;
|
|
light.shadow.camera.far = 2000;
|
|
light.shadow.bias = - 0.000222;
|
|
light.shadow.mapSize.width = 1024;
|
|
light.shadow.mapSize.height = 1024;
|
|
scene.add( light );
|
|
|
|
const planeGeometry = new THREE.PlaneGeometry( 2000, 2000 );
|
|
planeGeometry.rotateX( - Math.PI / 2 );
|
|
const planeMaterial = new THREE.ShadowMaterial( { color: 0x000000, opacity: 0.2 } );
|
|
|
|
const plane = new THREE.Mesh( planeGeometry, planeMaterial );
|
|
plane.position.y = - 200;
|
|
plane.receiveShadow = true;
|
|
scene.add( plane );
|
|
|
|
const helper = new THREE.GridHelper( 2000, 100 );
|
|
helper.position.y = - 199;
|
|
helper.material.opacity = 0.25;
|
|
helper.material.transparent = true;
|
|
scene.add( helper );
|
|
|
|
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
renderer.shadowMap.enabled = true;
|
|
container.appendChild( renderer.domElement );
|
|
|
|
const gui = new GUI();
|
|
|
|
gui.add( params, 'uniform' ).onChange( render );
|
|
gui.add( params, 'tension', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
|
|
|
|
splines.uniform.tension = value;
|
|
updateSplineOutline();
|
|
render();
|
|
|
|
} );
|
|
gui.add( params, 'centripetal' ).onChange( render );
|
|
gui.add( params, 'chordal' ).onChange( render );
|
|
gui.add( params, 'addPoint' );
|
|
gui.add( params, 'removePoint' );
|
|
gui.add( params, 'exportSpline' );
|
|
gui.open();
|
|
|
|
// Controls
|
|
const controls = new OrbitControls( camera, renderer.domElement );
|
|
controls.damping = 0.2;
|
|
controls.addEventListener( 'change', render );
|
|
|
|
transformControl = new TransformControls( camera, renderer.domElement );
|
|
transformControl.addEventListener( 'change', render );
|
|
transformControl.addEventListener( 'dragging-changed', function ( event ) {
|
|
|
|
controls.enabled = ! event.value;
|
|
|
|
} );
|
|
scene.add( transformControl );
|
|
|
|
transformControl.addEventListener( 'objectChange', function () {
|
|
|
|
updateSplineOutline();
|
|
|
|
} );
|
|
|
|
document.addEventListener( 'pointerdown', onPointerDown );
|
|
document.addEventListener( 'pointerup', onPointerUp );
|
|
document.addEventListener( 'pointermove', onPointerMove );
|
|
window.addEventListener( 'resize', onWindowResize );
|
|
|
|
/*******
|
|
* Curves
|
|
*********/
|
|
|
|
for ( let i = 0; i < splinePointsLength; i ++ ) {
|
|
|
|
addSplineObject( positions[ i ] );
|
|
|
|
}
|
|
|
|
positions.length = 0;
|
|
|
|
for ( let i = 0; i < splinePointsLength; i ++ ) {
|
|
|
|
positions.push( splineHelperObjects[ i ].position );
|
|
|
|
}
|
|
|
|
const geometry = new THREE.BufferGeometry();
|
|
geometry.setAttribute( 'position', new THREE.BufferAttribute( new Float32Array( ARC_SEGMENTS * 3 ), 3 ) );
|
|
|
|
let curve = new THREE.CatmullRomCurve3( positions );
|
|
curve.curveType = 'catmullrom';
|
|
curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
|
|
color: 0xff0000,
|
|
opacity: 0.35
|
|
} ) );
|
|
curve.mesh.castShadow = true;
|
|
splines.uniform = curve;
|
|
|
|
curve = new THREE.CatmullRomCurve3( positions );
|
|
curve.curveType = 'centripetal';
|
|
curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
|
|
color: 0x00ff00,
|
|
opacity: 0.35
|
|
} ) );
|
|
curve.mesh.castShadow = true;
|
|
splines.centripetal = curve;
|
|
|
|
curve = new THREE.CatmullRomCurve3( positions );
|
|
curve.curveType = 'chordal';
|
|
curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
|
|
color: 0x0000ff,
|
|
opacity: 0.35
|
|
} ) );
|
|
curve.mesh.castShadow = true;
|
|
splines.chordal = curve;
|
|
|
|
for ( const k in splines ) {
|
|
|
|
const spline = splines[ k ];
|
|
scene.add( spline.mesh );
|
|
|
|
}
|
|
|
|
load( [ new THREE.Vector3( 289.76843686945404, 452.51481137238443, 56.10018915737797 ),
|
|
new THREE.Vector3( - 53.56300074753207, 171.49711742836848, - 14.495472686253045 ),
|
|
new THREE.Vector3( - 91.40118730204415, 176.4306956436485, - 6.958271935582161 ),
|
|
new THREE.Vector3( - 383.785318791128, 491.1365363371675, 47.869296953772746 ) ] );
|
|
|
|
render();
|
|
|
|
}
|
|
|
|
function addSplineObject( position ) {
|
|
|
|
const material = new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } );
|
|
const object = new THREE.Mesh( geometry, material );
|
|
|
|
if ( position ) {
|
|
|
|
object.position.copy( position );
|
|
|
|
} else {
|
|
|
|
object.position.x = Math.random() * 1000 - 500;
|
|
object.position.y = Math.random() * 600;
|
|
object.position.z = Math.random() * 800 - 400;
|
|
|
|
}
|
|
|
|
object.castShadow = true;
|
|
object.receiveShadow = true;
|
|
scene.add( object );
|
|
splineHelperObjects.push( object );
|
|
return object;
|
|
|
|
}
|
|
|
|
function addPoint() {
|
|
|
|
splinePointsLength ++;
|
|
|
|
positions.push( addSplineObject().position );
|
|
|
|
updateSplineOutline();
|
|
|
|
render();
|
|
|
|
}
|
|
|
|
function removePoint() {
|
|
|
|
if ( splinePointsLength <= 4 ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const point = splineHelperObjects.pop();
|
|
splinePointsLength --;
|
|
positions.pop();
|
|
|
|
if ( transformControl.object === point ) transformControl.detach();
|
|
scene.remove( point );
|
|
|
|
updateSplineOutline();
|
|
|
|
render();
|
|
|
|
}
|
|
|
|
function updateSplineOutline() {
|
|
|
|
for ( const k in splines ) {
|
|
|
|
const spline = splines[ k ];
|
|
|
|
const splineMesh = spline.mesh;
|
|
const position = splineMesh.geometry.attributes.position;
|
|
|
|
for ( let i = 0; i < ARC_SEGMENTS; i ++ ) {
|
|
|
|
const t = i / ( ARC_SEGMENTS - 1 );
|
|
spline.getPoint( t, point );
|
|
position.setXYZ( i, point.x, point.y, point.z );
|
|
|
|
}
|
|
|
|
position.needsUpdate = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function exportSpline() {
|
|
|
|
const strplace = [];
|
|
|
|
for ( let i = 0; i < splinePointsLength; i ++ ) {
|
|
|
|
const p = splineHelperObjects[ i ].position;
|
|
strplace.push( `new THREE.Vector3(${p.x}, ${p.y}, ${p.z})` );
|
|
|
|
}
|
|
|
|
console.log( strplace.join( ',\n' ) );
|
|
const code = '[' + ( strplace.join( ',\n\t' ) ) + ']';
|
|
prompt( 'copy and paste code', code );
|
|
|
|
}
|
|
|
|
function load( new_positions ) {
|
|
|
|
while ( new_positions.length > positions.length ) {
|
|
|
|
addPoint();
|
|
|
|
}
|
|
|
|
while ( new_positions.length < positions.length ) {
|
|
|
|
removePoint();
|
|
|
|
}
|
|
|
|
for ( let i = 0; i < positions.length; i ++ ) {
|
|
|
|
positions[ i ].copy( new_positions[ i ] );
|
|
|
|
}
|
|
|
|
updateSplineOutline();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
splines.uniform.mesh.visible = params.uniform;
|
|
splines.centripetal.mesh.visible = params.centripetal;
|
|
splines.chordal.mesh.visible = params.chordal;
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
function onPointerDown( event ) {
|
|
|
|
onDownPosition.x = event.clientX;
|
|
onDownPosition.y = event.clientY;
|
|
|
|
}
|
|
|
|
function onPointerUp( event ) {
|
|
|
|
onUpPosition.x = event.clientX;
|
|
onUpPosition.y = event.clientY;
|
|
|
|
if ( onDownPosition.distanceTo( onUpPosition ) === 0 ) transformControl.detach();
|
|
|
|
}
|
|
|
|
function onPointerMove( event ) {
|
|
|
|
pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
|
|
pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
|
|
|
|
raycaster.setFromCamera( pointer, camera );
|
|
|
|
const intersects = raycaster.intersectObjects( splineHelperObjects, false );
|
|
|
|
if ( intersects.length > 0 ) {
|
|
|
|
const object = intersects[ 0 ].object;
|
|
|
|
if ( object !== transformControl.object ) {
|
|
|
|
transformControl.attach( object );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function onWindowResize() {
|
|
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
render();
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|