midas
/
threejs-obj-space


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - geometry - spline extrusion</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> - spline extrusion examples<br/>
			by <a href="http://www.lab4games.net/zz85/blog" target="_blank" rel="noopener">zz85</a>
		</div>

		<script type="module">

			import * as THREE from '../build/three.module.js';

			import Stats from './jsm/libs/stats.module.js';
			import { GUI } from './jsm/libs/dat.gui.module.js';

			import { Curves } from './jsm/curves/CurveExtras.js';
			import { OrbitControls } from './jsm/controls/OrbitControls.js';

			var container, stats;

			var camera, scene, renderer, splineCamera, cameraHelper, cameraEye;

			var binormal = new THREE.Vector3();
			var normal = new THREE.Vector3();

			var pipeSpline = new THREE.CatmullRomCurve3( [
				new THREE.Vector3( 0, 10, - 10 ), new THREE.Vector3( 10, 0, - 10 ),
				new THREE.Vector3( 20, 0, 0 ), new THREE.Vector3( 30, 0, 10 ),
				new THREE.Vector3( 30, 0, 20 ), new THREE.Vector3( 20, 0, 30 ),
				new THREE.Vector3( 10, 0, 30 ), new THREE.Vector3( 0, 0, 30 ),
				new THREE.Vector3( - 10, 10, 30 ), new THREE.Vector3( - 10, 20, 30 ),
				new THREE.Vector3( 0, 30, 30 ), new THREE.Vector3( 10, 30, 30 ),
				new THREE.Vector3( 20, 30, 15 ), new THREE.Vector3( 10, 30, 10 ),
				new THREE.Vector3( 0, 30, 10 ), new THREE.Vector3( - 10, 20, 10 ),
				new THREE.Vector3( - 10, 10, 10 ), new THREE.Vector3( 0, 0, 10 ),
				new THREE.Vector3( 10, - 10, 10 ), new THREE.Vector3( 20, - 15, 10 ),
				new THREE.Vector3( 30, - 15, 10 ), new THREE.Vector3( 40, - 15, 10 ),
				new THREE.Vector3( 50, - 15, 10 ), new THREE.Vector3( 60, 0, 10 ),
				new THREE.Vector3( 70, 0, 0 ), new THREE.Vector3( 80, 0, 0 ),
				new THREE.Vector3( 90, 0, 0 ), new THREE.Vector3( 100, 0, 0 )
			] );

			var sampleClosedSpline = new THREE.CatmullRomCurve3( [
				new THREE.Vector3( 0, - 40, - 40 ),
				new THREE.Vector3( 0, 40, - 40 ),
				new THREE.Vector3( 0, 140, - 40 ),
				new THREE.Vector3( 0, 40, 40 ),
				new THREE.Vector3( 0, - 40, 40 )
			] );

			sampleClosedSpline.curveType = 'catmullrom';
			sampleClosedSpline.closed = true;

			// Keep a dictionary of Curve instances
			var splines = {
				GrannyKnot: new Curves.GrannyKnot(),
				HeartCurve: new Curves.HeartCurve( 3.5 ),
				VivianiCurve: new Curves.VivianiCurve( 70 ),
				KnotCurve: new Curves.KnotCurve(),
				HelixCurve: new Curves.HelixCurve(),
				TrefoilKnot: new Curves.TrefoilKnot(),
				TorusKnot: new Curves.TorusKnot( 20 ),
				CinquefoilKnot: new Curves.CinquefoilKnot( 20 ),
				TrefoilPolynomialKnot: new Curves.TrefoilPolynomialKnot( 14 ),
				FigureEightPolynomialKnot: new Curves.FigureEightPolynomialKnot(),
				DecoratedTorusKnot4a: new Curves.DecoratedTorusKnot4a(),
				DecoratedTorusKnot4b: new Curves.DecoratedTorusKnot4b(),
				DecoratedTorusKnot5a: new Curves.DecoratedTorusKnot5a(),
				DecoratedTorusKnot5c: new Curves.DecoratedTorusKnot5c(),
				PipeSpline: pipeSpline,
				SampleClosedSpline: sampleClosedSpline
			};

			var parent, tubeGeometry, mesh;

			var params = {
				spline: 'GrannyKnot',
				scale: 4,
				extrusionSegments: 100,
				radiusSegments: 3,
				closed: true,
				animationView: false,
				lookAhead: false,
				cameraHelper: false,
			};

			var material = new THREE.MeshLambertMaterial( { color: 0xff00ff } );

			var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.3, wireframe: true, transparent: true } );

			function addTube() {

				if ( mesh !== undefined ) {

					parent.remove( mesh );
					mesh.geometry.dispose();

				}

				var extrudePath = splines[ params.spline ];

				tubeGeometry = new THREE.TubeBufferGeometry( extrudePath, params.extrusionSegments, 2, params.radiusSegments, params.closed );

				addGeometry( tubeGeometry );

				setScale();

			}

			function setScale() {

				mesh.scale.set( params.scale, params.scale, params.scale );

			}


			function addGeometry( geometry ) {

				// 3D shape

				mesh = new THREE.Mesh( geometry, material );
				var wireframe = new THREE.Mesh( geometry, wireframeMaterial );
				mesh.add( wireframe );

				parent.add( mesh );

			}

			function animateCamera() {

				cameraHelper.visible = params.cameraHelper;
				cameraEye.visible = params.cameraHelper;

			}

			init();
			animate();

			function init() {

				container = document.getElementById( 'container' );

				// camera

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

				// scene

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

				// light

				var light = new THREE.DirectionalLight( 0xffffff );
				light.position.set( 0, 0, 1 );
				scene.add( light );

				// tube

				parent = new THREE.Object3D();
				scene.add( parent );

				splineCamera = new THREE.PerspectiveCamera( 84, window.innerWidth / window.innerHeight, 0.01, 1000 );
				parent.add( splineCamera );

				cameraHelper = new THREE.CameraHelper( splineCamera );
				scene.add( cameraHelper );

				addTube();

				// debug camera

				cameraEye = new THREE.Mesh( new THREE.SphereBufferGeometry( 5 ), new THREE.MeshBasicMaterial( { color: 0xdddddd } ) );
				parent.add( cameraEye );

				cameraHelper.visible = params.cameraHelper;
				cameraEye.visible = params.cameraHelper;

				// renderer

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

				// stats

				stats = new Stats();
				container.appendChild( stats.dom );

				// dat.GUI

				var gui = new GUI( { width: 300 } );

				var folderGeometry = gui.addFolder( 'Geometry' );
				folderGeometry.add( params, 'spline', Object.keys( splines ) ).onChange( function () {

					addTube();

				} );
				folderGeometry.add( params, 'scale', 2, 10 ).step( 2 ).onChange( function () {

					setScale();

				} );
				folderGeometry.add( params, 'extrusionSegments', 50, 500 ).step( 50 ).onChange( function () {

					addTube();

				} );
				folderGeometry.add( params, 'radiusSegments', 2, 12 ).step( 1 ).onChange( function () {

					addTube();

				} );
				folderGeometry.add( params, 'closed' ).onChange( function () {

					addTube();

				} );
				folderGeometry.open();

				var folderCamera = gui.addFolder( 'Camera' );
				folderCamera.add( params, 'animationView' ).onChange( function () {

					animateCamera();

				} );
				folderCamera.add( params, 'lookAhead' ).onChange( function () {

					animateCamera();

				} );
				folderCamera.add( params, 'cameraHelper' ).onChange( function () {

					animateCamera();

				} );
				folderCamera.open();

				var controls = new OrbitControls( camera, renderer.domElement );

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

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

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

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				render();
				stats.update();

			}

			function render() {

				// animate camera along spline

				var time = Date.now();
				var looptime = 20 * 1000;
				var t = ( time % looptime ) / looptime;

				var pos = tubeGeometry.parameters.path.getPointAt( t );
				pos.multiplyScalar( params.scale );

				// interpolation

				var segments = tubeGeometry.tangents.length;
				var pickt = t * segments;
				var pick = Math.floor( pickt );
				var pickNext = ( pick + 1 ) % segments;

				binormal.subVectors( tubeGeometry.binormals[ pickNext ], tubeGeometry.binormals[ pick ] );
				binormal.multiplyScalar( pickt - pick ).add( tubeGeometry.binormals[ pick ] );

				var dir = tubeGeometry.parameters.path.getTangentAt( t );
				var offset = 15;

				normal.copy( binormal ).cross( dir );

				// we move on a offset on its binormal

				pos.add( normal.clone().multiplyScalar( offset ) );

				splineCamera.position.copy( pos );
				cameraEye.position.copy( pos );

				// using arclength for stablization in look ahead

				var lookAt = tubeGeometry.parameters.path.getPointAt( ( t + 30 / tubeGeometry.parameters.path.getLength() ) % 1 ).multiplyScalar( params.scale );

				// camera orientation 2 - up orientation via normal

				if ( ! params.lookAhead ) lookAt.copy( pos ).add( dir );
				splineCamera.matrix.lookAt( splineCamera.position, lookAt, normal );
				splineCamera.quaternion.setFromRotationMatrix( splineCamera.matrix );

				cameraHelper.update();

				renderer.render( scene, params.animationView === true ? splineCamera : camera );

			}

		</script>
	</body>
</html>