Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_buffergeometry_uint.html 5.3 KB
Newer Older
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - buffergeometry - uint</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 {
				color: #cccccc;
				font-family:Monospace;
				font-size:13px;
				text-align:center;

				background-color: #050505;
				margin: 0px;
				overflow: hidden;
			}

			#info {
				position: absolute;
				top: 0px; width: 100%;
				padding: 5px;
			}

			a {
				color: #0080ff;
			}

		</style>
	</head>
	<body>

		<div id="container"></div>
M
Fixed lgtm.com unsafe external link alerts.  
Mr.doob 已提交
34 
		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry - uint</div>
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
35
W
Examples: three.min.js -> three.js  
WestLangley 已提交
36 
		<script src="../build/three.js"></script>
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 

		<script src="js/Detector.js"></script>
		<script src="js/libs/stats.min.js"></script>

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var container, stats;

			var camera, scene, renderer;

			var mesh;

			init();
			animate();

			function init() {

				container = document.getElementById( 'container' );

				//

				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
				camera.position.z = 2750;

				scene = new THREE.Scene();
M
Examples: Replaced relevant renderer.setClearColor() with scene.background.  
Mr.doob 已提交
64 
				scene.background = new THREE.Color( 0x050505 );
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 
				scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );

				//

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

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

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

				//
M
Added IndexBufferAttribute.  
Mr.doob 已提交
81 
				var triangles = 500000;
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
82 83 84 

				var geometry = new THREE.BufferGeometry();
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
85 86 87 88 
				var indices = [];
				var positions = [];
				var normals = [];
				var colors = [];
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
89 90 91 

				var color = new THREE.Color();
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
92 93 
				var n = 800, n2 = n / 2;	// triangles spread in the cube
				var d = 12, d2 = d / 2;	// individual triangle size
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
94 95 96 97 98 99 100 101 

				var pA = new THREE.Vector3();
				var pB = new THREE.Vector3();
				var pC = new THREE.Vector3();

				var cb = new THREE.Vector3();
				var ab = new THREE.Vector3();
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
102 
				for ( var i = 0; i < triangles; i ++ ) {
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 

					// positions

					var x = Math.random() * n - n2;
					var y = Math.random() * n - n2;
					var z = Math.random() * n - n2;

					var ax = x + Math.random() * d - d2;
					var ay = y + Math.random() * d - d2;
					var az = z + Math.random() * d - d2;

					var bx = x + Math.random() * d - d2;
					var by = y + Math.random() * d - d2;
					var bz = z + Math.random() * d - d2;

					var cx = x + Math.random() * d - d2;
					var cy = y + Math.random() * d - d2;
					var cz = z + Math.random() * d - d2;
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
122 123 124 
					positions.push( ax, ay, az );
					positions.push( bx, by, bz );
					positions.push( cx, cy, cz );
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 

					// flat face normals

					pA.set( ax, ay, az );
					pB.set( bx, by, bz );
					pC.set( cx, cy, cz );

					cb.subVectors( pC, pB );
					ab.subVectors( pA, pB );
					cb.cross( ab );

					cb.normalize();

					var nx = cb.x;
					var ny = cb.y;
					var nz = cb.z;
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
142 143 144 
					normals.push( nx * 32767, ny * 32767, nz * 32767 );
					normals.push( nx * 32767, ny * 32767, nz * 32767 );
					normals.push( nx * 32767, ny * 32767, nz * 32767 );
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
145 146 147 148 149 150 151 152 153 

					// colors

					var vx = ( x / n ) + 0.5;
					var vy = ( y / n ) + 0.5;
					var vz = ( z / n ) + 0.5;

					color.setRGB( vx, vy, vz );
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
154 155 156 
					colors.push( color.r * 255, color.g * 255, color.b * 255 );
					colors.push( color.r * 255, color.g * 255, color.b * 255 );
					colors.push( color.r * 255, color.g * 255, color.b * 255 );
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
157
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
158 
				}
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
159
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
160 161 162 
				var positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
				var normalAttribute = new THREE.Int16BufferAttribute( normals, 3 );
				var colorAttribute = new THREE.Uint8BufferAttribute( colors, 3 );
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
163
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
164 165 
				normalAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shader
				colorAttribute.normalized = true;
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
166
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
167 168 169 
				geometry.addAttribute( 'position', positionAttribute );
				geometry.addAttribute( 'normal',  normalAttribute );
				geometry.addAttribute( 'color',colorAttribute );
M
Updated loaders and examples to new BufferAttribute pattern.  
Mr.doob 已提交
170
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
171 172 173 
				geometry.computeBoundingSphere();

				var material = new THREE.MeshPhongMaterial( {
B
remove material.ambient from everything per discussion here:...  
Ben Houston 已提交
174 
					color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
M
Minor tweaks.  
Mr.doob 已提交
175 
					side: THREE.DoubleSide, vertexColors: THREE.VertexColors
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
176 177 178 179 180 181 182 183 
				} );

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

				//

				renderer = new THREE.WebGLRenderer( { antialias: false } );
M
Examples: Added setPixelRatio(). See #5627.  
Mr.doob 已提交
184 
				renderer.setPixelRatio( window.devicePixelRatio );
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
185 186 187 188 189 190 191 192 193 194 
				renderer.setSize( window.innerWidth, window.innerHeight );

				renderer.gammaInput = true;
				renderer.gammaOutput = true;

				container.appendChild( renderer.domElement );

				//

				stats = new Stats();
M
stats.js usage clean up  
Mr.doob 已提交
195 
				container.appendChild( stats.dom );
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 

				//

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

			}

			function onWindowResize() {

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

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

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				render();
				stats.update();

			}

			function render() {

				var time = Date.now() * 0.001;

				mesh.rotation.x = time * 0.25;
				mesh.rotation.y = time * 0.5;

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>