javascript
/
three.js
zrkadlo https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413
							
<!doctype html>
<html lang="en">
	<head>
		<title>three.js webgl - geometry - shapes</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<script src="../build/Three.js"></script>
		<script src="../src/extras/core/Curve.js"></script>
		<script src="../src/extras/geometries/TubeGeometry.js"></script>
		<script src="../src/extras/helpers/CameraHelper.js"></script>

		<!-- where curves formulas are defined -->
		<script src="js/CurveExtras.js"></script>

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


		<script>
		var container, stats;

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

		var text, plane;

		var targetRotation = 0;
		var targetRotationOnMouseDown = 0;

		var mouseX = 0;
		var mouseXOnMouseDown = 0;

		var windowHalfX = window.innerWidth / 2;
		var windowHalfY = window.innerHeight / 2;

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


		var pipeSpline = new THREE.SplineCurve3([
				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.ClosedSplineCurve3([
			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),
		]);

		// 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
		};


		extrudePath = new THREE.Curves.TrefoilKnot();

		var dropdown = '<select id="dropdown" onchange="addTube(this.value)">';

		var s;
		for ( s in splines ) {
			dropdown += '<option value="' + s + '"';
			dropdown += '>' + s + '</option>';
		}

		dropdown += '</select>';

		var closed2 = true;
		var debug = true;
		var parent;
		var tube, tubeMesh;
		var animation = false, lookAhead = false;
		var scale;
		var showCameraHelper = false;

		function addTube() {

			var value = document.getElementById('dropdown').value;

			var segments = parseInt(document.getElementById('segments').value);
			closed2 = document.getElementById('closed').checked;
			debug = document.getElementById('debug').checked;

			var radiusSegments = parseInt(document.getElementById('radiusSegments').value);

			console.log('adding tube', value, closed2, debug, radiusSegments);
			if (tubeMesh) parent.remove(tubeMesh);

			extrudePath = splines[value];

			tube = new THREE.TubeGeometry(extrudePath, segments, 2, radiusSegments, closed2, debug);

			addGeometry(tube, 0xff00ff);
			setScale();

		}

		function setScale() {

			scale = parseInt( document.getElementById('scale').value );
			tubeMesh.scale.set( scale, scale, scale );

		}


		function addGeometry( geometry, color ) {

			// 3d shape

			tubeMesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [
				new THREE.MeshLambertMaterial({
					color: color,
					opacity: geometry.debug ? 0.2 : 0.8,
					transparent: true
				}),
				new THREE.MeshBasicMaterial({
					color: 0x000000,
					opacity: 0.5,
					wireframe: true
			})]);

			if ( geometry.debug ) tubeMesh.add( geometry.debug );

			parent.add( tubeMesh );

		}

		function animateCamera( toggle ) {

			if ( toggle ) {

				animation = !animation;
				document.getElementById('animation').value = 'Camera Spline Animation View: ' + (animation? 'ON': 'OFF');

			}

			lookAhead = document.getElementById('lookAhead').checked;

			showCameraHelper = document.getElementById('cameraHelper').checked;

			cameraHelper.children[0].visible = showCameraHelper;
			cameraEye.visible = showCameraHelper;
		}


		init();
		animate();

		function init() {

			container = document.createElement('div');
			document.body.appendChild(container);

			var info = document.createElement('div');
			info.style.position = 'absolute';
			info.style.top = '10px';
			info.style.width = '100%';
			info.style.textAlign = 'center';
			info.innerHTML = 'Spline Extrusion Examples by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Select spline:';

			info.innerHTML += dropdown;

			info.innerHTML += '<br/>Scale: <select id="scale" onchange="setScale()"><option>1</option><option>2</option><option selected>4</option><option>6</option><option>10</option></select>';
			info.innerHTML += '<br/>Extrusion Segments: <select onchange="addTube()" id="segments"><option>50</option><option selected>100</option><option>200</option><option>400</option></select>';
			info.innerHTML += '<br/>Radius Segments: <select id="radiusSegments" onchange="addTube()"><option>1</option><option>2</option><option selected>3</option><option>4</option><option>5</option><option>6</option><option>8</option><option>12</option></select>';
			info.innerHTML += '<br/>Debug normals: <input id="debug" type="checkbox" onchange="addTube()"  /> Closed:<input id="closed" onchange="addTube()" type="checkbox" checked />';

			info.innerHTML += '<br/><br/><input id="animation" type="button" onclick="animateCamera(true)" value="Camera Spline Animation View: OFF"/><br/> Look Ahead <input id="lookAhead" type="checkbox" onchange="animateCamera()" /> Camera Helper <input id="cameraHelper" type="checkbox" onchange="animateCamera()" />';

			container.appendChild(info);

			scene = new THREE.Scene();

			//

			camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 1000);
			splineCamera = new THREE.PerspectiveCamera(84, window.innerWidth / window.innerHeight, 0.01, 1000);
			cameraHelper = new THREE.CameraHelper(splineCamera);

			camera.position.set(0, 50, 500);

			scene.add(camera);


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

			parent = new THREE.Object3D();
			parent.position.y = 100;
			scene.add(parent);

			addTube();

			// Debug point
			cameraEye = new THREE.Mesh(new THREE.SphereGeometry(5), new THREE.MeshBasicMaterial({
					color: 0xdddddd
			}));

			cameraHelper.children[0].visible = showCameraHelper;
			cameraEye.visible = showCameraHelper;

			parent.add(cameraEye);

			cameraHelper.scale.multiplyScalar(0.1);
			splineCamera.add(cameraHelper);
			parent.add(splineCamera);

			//
			renderer = new THREE.WebGLRenderer({
					antialias: true
			});
			renderer.setSize(window.innerWidth, window.innerHeight);

			container.appendChild(renderer.domElement);

			stats = new Stats();
			stats.domElement.style.position = 'absolute';
			stats.domElement.style.top = '0px';
			container.appendChild(stats.domElement);

			renderer.domElement.addEventListener('mousedown', onDocumentMouseDown, false);
			renderer.domElement.addEventListener('touchstart', onDocumentTouchStart, false);
			renderer.domElement.addEventListener('touchmove', onDocumentTouchMove, false);

			//

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

		}

		function onWindowResize() {

			windowHalfX = window.innerWidth / 2;
			windowHalfY = window.innerHeight / 2;

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

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

		}

		//

		function onDocumentMouseDown(event) {

			event.preventDefault();

			renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false);
			renderer.domElement.addEventListener('mouseup', onDocumentMouseUp, false);
			renderer.domElement.addEventListener('mouseout', onDocumentMouseOut, false);

			mouseXOnMouseDown = event.clientX - windowHalfX;
			targetRotationOnMouseDown = targetRotation;

		}

		function onDocumentMouseMove(event) {

			mouseX = event.clientX - windowHalfX;

			targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;

		}

		function onDocumentMouseUp(event) {

			renderer.domElement.removeEventListener('mousemove', onDocumentMouseMove, false);
			renderer.domElement.removeEventListener('mouseup', onDocumentMouseUp, false);
			renderer.domElement.removeEventListener('mouseout', onDocumentMouseOut, false);

		}

		function onDocumentMouseOut(event) {

			renderer.domElement.removeEventListener('mousemove', onDocumentMouseMove, false);
			renderer.domElement.removeEventListener('mouseup', onDocumentMouseUp, false);
			renderer.domElement.removeEventListener('mouseout', onDocumentMouseOut, false);

		}

		function onDocumentTouchStart(event) {

			if (event.touches.length == 1) {

					event.preventDefault();

					mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
					targetRotationOnMouseDown = targetRotation;

			}

		}

		function onDocumentTouchMove(event) {

			if (event.touches.length == 1) {

					event.preventDefault();

					mouseX = event.touches[0].pageX - windowHalfX;
					targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;

			}

		}

		//

		function animate() {

			requestAnimationFrame(animate);

			render();
			stats.update();

		}

		function render() {

			// Try Animate Camera Along Spline
			var time = Date.now();
			var looptime = 20 * 1000;
			var t = (time % looptime) / looptime;

			var pos = tube.path.getPointAt(t);
			pos.multiplyScalar(scale);

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

			binormal.sub(tube.binormals[pickNext], tube.binormals[pick]);
			binormal.multiplyScalar(pickt - pick).addSelf(tube.binormals[pick]);


			var dir = tube.path.getTangentAt(t);

			var offset = 15;

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

			// We move on a offset on its binormal
			pos.addSelf(normal.clone().multiplyScalar(offset));

			splineCamera.position = pos;
			cameraEye.position = pos;


			// Camera Orientation 1 - default look at
			// splineCamera.lookAt(lookAt);

			// Using arclength for stablization in look ahead.
			var lookAt = tube.path.getPointAt((t + 30/tube.path.getLength()) % 1).multiplyScalar(scale);

			// Camera Orientation 2 - up orientation via normal
			if (!lookAhead)
			lookAt.copy(pos).addSelf(dir);
			splineCamera.matrix.lookAt(splineCamera.position, lookAt, normal);
			splineCamera.rotation.setEulerFromRotationMatrix(splineCamera.matrix, splineCamera.eulerOrder);

			cameraHelper.update();

			parent.rotation.y += (targetRotation - parent.rotation.y) * 0.05;

			if (animation) {

				renderer.render(scene, splineCamera);

			} else {

				renderer.render(scene, camera);

			}


		}
	</script>

	</body>
</html>