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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
							<!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>
    <canvas id="debug" style="position:absolute; left:100px"></canvas>

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


	<script>

    // Lets define some curves

    // Formula from http://mathworld.wolfram.com/HeartCurve.html

    THREE.HeartCurve = THREE.Curve.create(

		function ( s ) {

			this.scale = ( s === undefined ) ? 5 : s;

		},

		function ( t ) {

			t *= 2 * Math.PI;
			var tx = 16 * Math.pow( Math.sin( t ), 3 );
				ty = 13 * Math.cos( t )
					- 5 * Math.cos( 2 * t )
					- 2 * Math.cos( 3 * t )
					- Math.cos( 4 * t ),
				tz = 0;

			return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );

		}

    );


    // Viviani's Curve
    // http://en.wikipedia.org/wiki/Viviani%27s_curve

    THREE.VivianiCurve = THREE.Curve.create(

		function ( radius ) {

			this.radius = radius;

		},

		function ( t ) {

			t = t * 4 * Math.PI; // Normalized to 0..1
			var a = this.radius / 2;
			var tx = a * ( 1 + Math.cos( t ) ),
				ty = a * Math.sin( t ),
				tz = 2 * a * Math.sin( t / 2 );

			return new THREE.Vector3( tx, ty, tz );

		}

    );

    THREE.KnotCurve = THREE.Curve.create(

		function () {},

		function ( t ) {

			t *= 2 * Math.PI;

			var R = 10;
			var s = 50;
			var tx = s * Math.sin( t ),
				ty = Math.cos( t ) * ( R + s * Math.cos( t ) ),
				tz = Math.sin( t ) * ( R + s * Math.cos( t ) );

			return new THREE.Vector3( tx, ty, tz );

		}

    );

    THREE.HelixCurve = THREE.Curve.create(

		function () {},

		function ( t ) {

			var a = 30; // radius
			var b = 150; //height
			var t2 = 2 * Math.PI * t * b / 30;
			var tx = Math.cos( t2 ) * a,
				ty = Math.sin( t2 ) * a,
				tz = b * t;

			return new THREE.Vector3( tx, ty, tz );

		}

    );

    var container, stats;

    var camera, scene, renderer;

    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;

    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 = 'Simple procedurally generated 3D shapes example by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Drag to spin';
		container.appendChild(info);

		scene = new THREE.Scene();

		camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
		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 = 130;
		scene.add( parent );

		function addGeometry( geometry, color, x, y, z, rx, ry, rz, s ) {

			// 3d shape

			var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [
				new THREE.MeshLambertMaterial( { color: color }),
				new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } )
			]);

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

			mesh.position.set( x, y, z - 75 );
			mesh.rotation.set( rx, ry, rz );
			mesh.scale.set( s, s, s );
			parent.add( mesh );

		}

		// var extrudePath = 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 extrudePath = new THREE.HeartCurve( 3.5 );
		// var extrudePath = new THREE.VivianiCurve(70);
		// var extrudePath = new THREE.KnotCurve();
		// extrudePath = new THREE.HelixCurve();

		// var extrudePath = 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),
		// ]);


		var tube = new THREE.TubeGeometry( 5, 100, 10, extrudePath, true );

		addGeometry( tube, 0xff1100, 0, -80, 0, 0, 0, 0, 3 );

		//

		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 );

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

    }

    //

    function onDocumentMouseDown( event ) {

		event.preventDefault();

		document.addEventListener('mousemove', onDocumentMouseMove, false);
		document.addEventListener('mouseup', onDocumentMouseUp, false);
		document.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 ) {

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

    }

	function onDocumentMouseOut( event ) {

		document.removeEventListener('mousemove', onDocumentMouseMove, false);
		document.removeEventListener('mouseup', onDocumentMouseUp, false);
		document.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() {

      parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
      renderer.render( scene, camera );

    }

	</script>

  </body>
</html>