javascript
/
three.js
spogulis no https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
							<!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 direction = new THREE.Vector3();
			var binormal = new THREE.Vector3();
			var normal = new THREE.Vector3();
			var position = new THREE.Vector3();
			var lookAt = 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 );
				controls.minDistance = 100;
				controls.maxDistance = 2000;

				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;

				tubeGeometry.parameters.path.getPointAt( t, position );
				position.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 ] );

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

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

				// we move on a offset on its binormal

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

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

				// using arclength for stablization in look ahead

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

				// camera orientation 2 - up orientation via normal

				if ( ! params.lookAhead ) lookAt.copy( position ).add( direction );
				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>