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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
							<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>three.js webgl - geometry extrude</title>

	</head>

	<body>

	<script src="../build/Three.js"></script>
	<script>

		var TEXDATA = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFB'+
					  'MVEWcEFqcGGOlIWOlIWulKWutOXOtOXutQnu1SoS6Uo69Y5zMfrHWnMbepc7erdbntd6d+uwA'+
					  'AAAAo0lEQVR42mNgoAL4jwaIEQDp405gYOBKYLjvwIAssIBhLwM7ssABhtUMXECB3Q0M3nsTG'+
					  'Lr3fmTwYuABGbqAIf9/AsP6/z8YWBjskQV+A/X2IwTccv4CBfYjBBi4/6MLoKnIWotmxvr/v4'+
					  'C2+CMLfGPwYOBHFvjAUAUyGW5t5gao02G2sME8BxcoYDgvwAgS2LVqPxCvWr1rFZAiKggJClA'+
					  'BAAC+WuzCiXr+gwAAAABJRU5ErkJggg==';

		var renderer, camera, scene, mesh, mesh2;
		var angle = 0;

		init();
		animate();

		function init() {

			scene = new THREE.Scene();

			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
			scene.add( camera );

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


			renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			setupModel();

		};

		function createMesh( g, texture ) {

			var m = new THREE.Mesh( g, new THREE.MeshFaceMaterial()) ;
			g.materials =
					[
						new THREE.MeshBasicMaterial( { map: texture } ),
						new THREE.MeshBasicMaterial( { color: 0xcc4488 } )
					];

			return m;

		}

		function setupModel() {

			var img = new Image();
			img.onload = function() { texture.needsUpdate = true; }
			img.src = TEXDATA;
			var texture = new THREE.Texture( img );

			var s = new THREE.Shape();
			s.moveTo( 0,0 );
			s.lineTo( -4, -4 );
			s.lineTo(  4, -4 );
			s.lineTo(  5, 0 );
			s.lineTo(  4, 4 );
			s.lineTo( -4, 4 );

            var ho = new THREE.Shape();
            ho.moveTo( 1+ 0,0 );
            ho.lineTo( 1+ -2, -2 );
            ho.lineTo( 0.5+  2, -2 );
            ho.lineTo( 1+  2.5, 0 );
            ho.lineTo( 0.5+  2, 2 );
            ho.lineTo( 1+ -2, 2 );

			s.holes.push(ho);

			var s2 = new THREE.Shape();
			s2.moveTo( 8+ 0,0 );
			s2.lineTo( 8+ -2, -2 );
			s2.lineTo( 8+  2, -2 );
			s2.lineTo( 8+  2.5, 0 );
			s2.lineTo( 8+  2, 2 );
			s2.lineTo( 8+ -2, 2 );

			var exoption = {
				bevelEnabled: false,
				bevelSize: 1,
				amount: 6,
				extrudeMaterial: 0,
				material: 1
			};

			var geom = s.extrude( exoption );
			mesh = createMesh( geom, texture );
			mesh.position.set( -7, 0, -45 );
			mesh.doubleSided = true;
			scene.add( mesh );

			var geom2 = new THREE.ExtrudeGeometry( [s,s2], exoption );
			mesh2 = createMesh( geom2, texture );
			mesh2.position.set( 7, 0, -45 );
			mesh2.doubleSided = true;
			scene.add( mesh2 );

		}

		function animate() {

			requestAnimationFrame( animate );

			render();

		}

		function render() {

			angle = Date.now() * 0.001;

			mesh.rotation.set( -3.2, angle, 0 );
			mesh2.rotation.set( -3.2, angle, 0 );

			renderer.render( scene, camera );

		}

	</script>

	</body>
</html>