javascript
/
three.js
-ын хуулбар https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
							<!DOCTYPE html>
<html lang="en">
	<head>
	<title>three.js - BufferGeometry constructed from Geometry Example</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 {
			background-color: #000;
			font-family: Monospace;
			margin: 0;
			color: #000;
			overflow: hidden;
		}
		#title {
			position: absolute;
			width: 100%;
			top: 0;
			padding: 0;
			text-align: center;
			font-size: 1.1em;
			background-color: rgba(64,96,64,0.7);
			color: #fff;
		}
		#title a {color:#ff0;}
	</style>
	<script type="text/javascript" src="../build/three.js"></script>
	<script type="text/javascript" src="js/Detector.js"></script>
	<script type="text/javascript" src="js/libs/stats.min.js"></script>
	<script type="text/javascript" src="js/controls/TrackballControls.js"></script>
	</head>
	<body onload="app()">
		<div id="title"></div>
		<script>
		var camera, scene, renderer, controls, stats;

		function app() {

			if ( ! Detector.webgl ) {

				Detector.addGetWebGLMessage();

			}

			init();
			animate();

		}

		function init() {

			renderer = new THREE.WebGLRenderer( {
				antialias: true
			} );
			renderer.setClearColor( 0x000000, 0.0 );
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );

			document.body.appendChild( renderer.domElement );

			scene = new THREE.Scene();

			camera = new THREE.PerspectiveCamera( 45.0, window.innerWidth / window.innerHeight, 100, 1500.0 );
			camera.position.z = 480.0;

			scene.add( new THREE.AmbientLight( 0x444444 ) );

			var light1 = new THREE.DirectionalLight( 0x999999, 0.1 );
			light1.position.set( 1, 1, 1 );
			scene.add( light1 );

			var light2 = new THREE.DirectionalLight( 0x999999, 1.5 );
			light2.position.set( 0, -1, 0 );
			scene.add( light2 );

			controls = new THREE.TrackballControls( camera, renderer.domElement );
			controls.minDistance = 100.0;
			controls.maxDistance = 800.0;
			controls.dynamicDampingFactor = 0.1;

			stats = new Stats();
			document.body.appendChild( stats.dom );

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

			createScene();

		}

		function createGeometry() {

			var heart_shape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths
			var x = 0,
				y = 0;
			heart_shape.moveTo( x + 25, y + 25 );
			heart_shape.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y );
			heart_shape.bezierCurveTo( x - 30, y, x - 30, y + 35, x - 30, y + 35 );
			heart_shape.bezierCurveTo( x - 30, y + 55, x - 10, y + 77, x + 25, y + 95 );
			heart_shape.bezierCurveTo( x + 60, y + 77, x + 80, y + 55, x + 80, y + 35 );
			heart_shape.bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y );
			heart_shape.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 );
			var extrudeSettings = {
				amount: 16,
				bevelEnabled: true,
				bevelSegments: 1,
				steps: 2,
				bevelSize: 1,
				bevelThickness: 1
			};
			var geom = new THREE.ExtrudeGeometry( heart_shape, extrudeSettings );
			geom.rotateX( - Math.PI / 2 );
			geom.scale( 0.4, 0.4, 0.4 );
			return geom;

		}

		function createScene() {

			var buffer_geometry = new THREE.BufferGeometry();
			var radius = 100.0;
			var positions = 0;
			var normals = 0;
			var colors = 0;
			var shape_density = 14;

			for ( var num_lat = 0; num_lat < shape_density / 2; ++ num_lat ) {

				var lat_lhs = ( num_lat + 0 ) * 180 / ( shape_density / 2 );
				var lat_rhs = ( num_lat + 1 ) * 180 / ( shape_density / 2 );
				var lat = ( lat_lhs + lat_rhs ) / 2.0;

				for ( var num_lng = 0; num_lng < shape_density; ++ num_lng ) {

					var lng_lhs = ( num_lng + 0 ) * 360 / shape_density;
					var lng_rhs = ( num_lng + 1 ) * 360 / shape_density;
					var lng = ( lng_lhs + lng_rhs ) / 2.0;

					var height = 30.0;

					var phi = lat * Math.PI / 180.0;
					var theta = lng * Math.PI / 180.0;
					var x = radius * Math.sin( phi ) * Math.cos( theta );
					var y = radius * Math.cos( phi );
					var z = radius * Math.sin( phi ) * Math.sin( theta );

					var geometry = createGeometry();

					geometry.translate( 0, height / 2, 0 );
					geometry.rotateX( - Math.PI / 2 );
					geometry.lookAt( new THREE.Vector3( - x, - y, - z ) );
					geometry.translate( x, y, z );

					var color = new THREE.Color( 0xffffff );
					color.setHSL( lat / 180.0, 1.0, 0.7 );

					if ( positions === 0 ) {

						var num_stacks = shape_density * shape_density / 2;

						var str = 'BufferGeometry constructed from Geometry Example - ' + parseInt( num_stacks * geometry.faces.length, 10 ) + ' triangles (<a target="_blank" href="http://callum.com">author</a>)';
						document.getElementById( 'title' ).innerHTML = str.replace( /\B(?=(\d{3})+(?!\d))/g, "," );

						positions = new Float32Array( num_stacks * geometry.faces.length * 3 * 3 );
						normals = new Float32Array( num_stacks * geometry.faces.length * 3 * 3 );
						colors = new Float32Array( num_stacks * geometry.faces.length * 3 * 3 );

					}

					geometry.faces.forEach( function ( face, index ) {

						var cur_element = ( ( num_lng + num_lat * shape_density ) * geometry.faces.length + index );

						positions[ cur_element * 9 + 0 ] = geometry.vertices[ face.a ].x;
						positions[ cur_element * 9 + 1 ] = geometry.vertices[ face.a ].y;
						positions[ cur_element * 9 + 2 ] = geometry.vertices[ face.a ].z;
						positions[ cur_element * 9 + 3 ] = geometry.vertices[ face.b ].x;
						positions[ cur_element * 9 + 4 ] = geometry.vertices[ face.b ].y;
						positions[ cur_element * 9 + 5 ] = geometry.vertices[ face.b ].z;
						positions[ cur_element * 9 + 6 ] = geometry.vertices[ face.c ].x;
						positions[ cur_element * 9 + 7 ] = geometry.vertices[ face.c ].y;
						positions[ cur_element * 9 + 8 ] = geometry.vertices[ face.c ].z;

						normals[ cur_element * 9 + 0 ] = face.normal.x;
						normals[ cur_element * 9 + 1 ] = face.normal.y;
						normals[ cur_element * 9 + 2 ] = face.normal.z;
						normals[ cur_element * 9 + 3 ] = face.normal.x;
						normals[ cur_element * 9 + 4 ] = face.normal.y;
						normals[ cur_element * 9 + 5 ] = face.normal.z;
						normals[ cur_element * 9 + 6 ] = face.normal.x;
						normals[ cur_element * 9 + 7 ] = face.normal.y;
						normals[ cur_element * 9 + 8 ] = face.normal.z;

						colors[ cur_element * 9 + 0 ] = color.r;
						colors[ cur_element * 9 + 1 ] = color.g;
						colors[ cur_element * 9 + 2 ] = color.b;
						colors[ cur_element * 9 + 3 ] = color.r;
						colors[ cur_element * 9 + 4 ] = color.g;
						colors[ cur_element * 9 + 5 ] = color.b;
						colors[ cur_element * 9 + 6 ] = color.r;
						colors[ cur_element * 9 + 7 ] = color.g;
						colors[ cur_element * 9 + 8 ] = color.b;

					} );

				}

			}

			buffer_geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
			buffer_geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
			buffer_geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );

			buffer_geometry.computeBoundingSphere();

			var buffer_material = new THREE.MeshPhongMaterial( {
				color: 0x999999,
				specular: 0x333333,
				shininess: 50,
				side: THREE.DoubleSide,
				vertexColors: THREE.VertexColors,
				shading: THREE.SmoothShading
			} );

			var buffer_mesh = new THREE.Mesh( buffer_geometry, buffer_material );
			scene.add( buffer_mesh );

		}

		function onWindowResize() {

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

		}

		function animate( time ) {

			requestAnimationFrame( animate );
			controls.update();
			stats.update();
			renderer.render( scene, camera );

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