Three
/
95


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - geometry - cube</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 {
				margin: 0px;
				background-color: #000000;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<script src="../build/three.js"></script>
        <script src="js/controls/OrbitControls.js"></script>
		<script>

			var camera, scene, renderer,controls;
			var mesh;

			init();
			animate();

            function createMesh(){
                
				
                var material;
                var b = 1 / 256;
                var c = 0.5 / 256;
                var d = 2.8 * c;
                var e = 0.5 * c;
                var vertexs = new Float32Array([0, 1, 0, 0.49609375 + b, 0.49609375 + b, 1, 0, 0, 0.9921875 + b, 0.49609375 + b, 0, 0, 1, 0.49609375 + b, 0.9921875 + b, -1, 0, 0, 0 + b, 0.49609375 + b, 0, 0, -1, 0.49609375 + b, 0 + b, 0, -1, 0, 0.9921875 + b, 0 + b, 0, -1, 0, 0.9921875 + b, 0.9921875 + b, 0, -1, 0, 0 + b, 0.9921875 + b, 0, -1, 0, 0 + b, 0 + b, d, 1 - d, -d, 0.5 + c, 0.5 - c, d, 1 - d, d, 0.5 + c, 0.5 + c, -d, 1 - d, d, 0.5 - c, 0.5 + c, -d, 1 - d, -d, 0.5 - c, 0.5 - c, -d, 0, -1 + d, 0.5 - c, 0 + b + c, d, 0, -1 + d, 0.5 + c, 0 + b + c, 1 - d, 0, -d, 0.9921875 + b - c, 0.5 - c, 1 - d, 0, d, 0.9921875 + b - c, 0.5 + c, d, 0, 1 - d, 0.5 + c, 0.9921875 + b - c, -d, 0, 1 - d, 0.5 - c, 0.9921875 + b - c, -1 + d, 0, d, 0 + b + c, 0.5 + c, -1 + d, 0, -d, 0 + b + c, 0.5 - c, 1, 0, 0, 0.9921875 + b - e, 0.49609375 + b, 0, 0, 1, 0.49609375 + b, 0.9921875 + b - e, -1, 0, 0, 0 + b + e, 0.49609375 + b, 0, 0, -1, 0.49609375 + b, 0 + b + e, 0, 1, 0, 0.49609375 + b - e, 0.49609375 + b, 0, 1, 0, 0.49609375 + b, 0.49609375 + b - e, 0, 1, 0, 0.49609375 + b + e, 0.49609375 + b, 0, 1, 0, 0.49609375 + b, 0.49609375 + b + e]);
                var indexes = new Uint16Array([2, 1, 6, 3, 2, 7, 8, 4, 3, 4, 5, 1, 9, 14, 15, 17, 10, 16, 18, 19, 11, 20, 13, 12, 28, 12, 13, 13, 24, 28, 28, 24, 9, 9, 24, 14, 25, 9, 15, 25, 15, 21, 10, 25, 21, 10, 21, 16, 22, 26, 10, 22, 10, 17, 18, 11, 26, 22, 18, 26, 19, 23, 27, 19, 27, 11, 23, 20, 27, 27, 20, 12]);
				
				var geometry = new THREE.BufferGeometry();
				var vertexBuffer = new THREE.InterleavedBuffer(new Float32Array(vertexs),5);
 				geometry.addAttribute( 'position', new THREE.InterleavedBufferAttribute( vertexBuffer, 3,0 ) );
				geometry.addAttribute( 'uv', new THREE.InterleavedBufferAttribute( vertexBuffer, 2 ,3) );
				geometry.setIndex(new THREE.Uint16BufferAttribute(new Uint16Array(indexes), 3))
                var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { side:2  } ));
                return mesh;
            }

			function init() {

				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .1, 2000000 );
				camera.position.z = 4;

				scene = new THREE.Scene();

                /*
				var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );

				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
				var material = new THREE.MeshBasicMaterial( { map: texture } );

                mesh = new THREE.Mesh( geometry, material );
                */
                mesh = createMesh();
				scene.add( mesh );

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

				//

				window.addEventListener( 'resize', onWindowResize, false );
                controls = new THREE.OrbitControls( camera, renderer.domElement );
				controls.target.set( 0, 0, 0 );
				controls.update();
			}

			function onWindowResize() {

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

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

			}

			function animate() {

				requestAnimationFrame( animate );
				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>