javascript
/
three.js
tükrözi: https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
							<!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 {
				CameraHelper,
				CatmullRomCurve3,
				Color,
				DirectionalLight,
				Mesh,
				MeshBasicMaterial,
				MeshLambertMaterial,
				Object3D,
				PerspectiveCamera,
				Scene,
				SphereBufferGeometry,
				TubeBufferGeometry,
				Vector3,
				WebGLRenderer
			} 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 Vector3();
			var normal = new Vector3();

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

			var sampleClosedSpline = new CatmullRomCurve3( [
				new Vector3( 0, - 40, - 40 ),
				new Vector3( 0, 40, - 40 ),
				new Vector3( 0, 140, - 40 ),
				new Vector3( 0, 40, 40 ),
				new 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 MeshLambertMaterial( { color: 0xff00ff } );

			var wireframeMaterial = new 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 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 Mesh( geometry, material );
				var wireframe = new 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 PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 10000 );
				camera.position.set( 0, 50, 500 );

				// scene

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

				// light

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

				// tube

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

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

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

				addTube();

				// debug camera

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

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

				// renderer

				renderer = new 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.rotation.setFromRotationMatrix( splineCamera.matrix, splineCamera.rotation.order );

				cameraHelper.update();

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

			}

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