javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
							<!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 src="../build/three.js"></script>
		<script src="js/controls/OrbitControls.js"></script>

		<!-- where curves formulas are defined -->

		<script src="js/CurveExtras.js"></script>

		<script src="js/libs/stats.min.js"></script>
		<script src="js/libs/dat.gui.min.js"></script>

		<script>

		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 THREE.Curves.GrannyKnot(),
			HeartCurve: new THREE.Curves.HeartCurve( 3.5 ),
			VivianiCurve: new THREE.Curves.VivianiCurve( 70 ),
			KnotCurve: new THREE.Curves.KnotCurve(),
			HelixCurve: new THREE.Curves.HelixCurve(),
			TrefoilKnot: new THREE.Curves.TrefoilKnot(),
			TorusKnot: new THREE.Curves.TorusKnot( 20 ),
			CinquefoilKnot: new THREE.Curves.CinquefoilKnot( 20 ),
			TrefoilPolynomialKnot: new THREE.Curves.TrefoilPolynomialKnot( 14 ),
			FigureEightPolynomialKnot: new THREE.Curves.FigureEightPolynomialKnot(),
			DecoratedTorusKnot4a: new THREE.Curves.DecoratedTorusKnot4a(),
			DecoratedTorusKnot4b: new THREE.Curves.DecoratedTorusKnot4b(),
			DecoratedTorusKnot5a: new THREE.Curves.DecoratedTorusKnot5a(),
			DecoratedTorusKnot5c: new THREE.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 dat.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 THREE.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.rotation.setFromRotationMatrix( splineCamera.matrix, splineCamera.rotation.order );

			cameraHelper.update();

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

		}

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