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.8 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
Updated loaders and examples to new BufferAttribute pattern.  
Mr.doob 已提交
85 
				var indices = new Uint32Array( triangles * 3 );
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
86 87 88 89 90 91 92 

				for ( var i = 0; i < indices.length; i ++ ) {

					indices[ i ] = i;

				}
M
Updated loaders and examples to new BufferAttribute pattern.  
Mr.doob 已提交
93 
				var positions = new Float32Array( triangles * 3 * 3 );
M
Merged webgl_buffergeometry_bufferDataTypes into _uint example.  
Mr.doob 已提交
94 95 
				var normals = new Int16Array( triangles * 3 * 3 );
				var colors = new Uint8Array( triangles * 3 * 3 );
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 

				var color = new THREE.Color();

				var n = 800, n2 = n/2;	// triangles spread in the cube
				var d = 12, d2 = d/2;	// individual triangle size

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

				for ( var i = 0; i < positions.length; i += 9 ) {

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

					positions[ i ]     = ax;
					positions[ i + 1 ] = ay;
					positions[ i + 2 ] = az;

					positions[ i + 3 ] = bx;
					positions[ i + 4 ] = by;
					positions[ i + 5 ] = bz;

					positions[ i + 6 ] = cx;
					positions[ i + 7 ] = cy;
					positions[ i + 8 ] = cz;

					// 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
Merged webgl_buffergeometry_bufferDataTypes into _uint example.  
Mr.doob 已提交
157 158 159 
					normals[ i ]     = nx * 32767;
					normals[ i + 1 ] = ny * 32767;
					normals[ i + 2 ] = nz * 32767;
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
160
M
Merged webgl_buffergeometry_bufferDataTypes into _uint example.  
Mr.doob 已提交
161 162 163 
					normals[ i + 3 ] = nx * 32767;
					normals[ i + 4 ] = ny * 32767;
					normals[ i + 5 ] = nz * 32767;
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
164
M
Merged webgl_buffergeometry_bufferDataTypes into _uint example.  
Mr.doob 已提交
165 166 167 
					normals[ i + 6 ] = nx * 32767;
					normals[ i + 7 ] = ny * 32767;
					normals[ i + 8 ] = nz * 32767;
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
168 169 170 171 172 173 174 175 176 

					// 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
Merged webgl_buffergeometry_bufferDataTypes into _uint example.  
Mr.doob 已提交
177 178 179 
					colors[ i ]     = color.r * 255;
					colors[ i + 1 ] = color.g * 255;
					colors[ i + 2 ] = color.b * 255;
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
180
M
Merged webgl_buffergeometry_bufferDataTypes into _uint example.  
Mr.doob 已提交
181 182 183 
					colors[ i + 3 ] = color.r * 255;
					colors[ i + 4 ] = color.g * 255;
					colors[ i + 5 ] = color.b * 255;
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
184
M
Merged webgl_buffergeometry_bufferDataTypes into _uint example.  
Mr.doob 已提交
185 186 187 
					colors[ i + 6 ] = color.r * 255;
					colors[ i + 7 ] = color.g * 255;
					colors[ i + 8 ] = color.b * 255;
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
188 189 190 

				}
M
Updated examples.  
Mr.doob 已提交
191 
				geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
M
Updated examples with API changes.  
Mr.doob 已提交
192 
				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
M
Merged webgl_buffergeometry_bufferDataTypes into _uint example.  
Mr.doob 已提交
193 194 
				geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3, true ) );
				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3, true ) );
M
Updated loaders and examples to new BufferAttribute pattern.  
Mr.doob 已提交
195
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
196 197 198 
				geometry.computeBoundingSphere();

				var material = new THREE.MeshPhongMaterial( {
B
remove material.ambient from everything per discussion here:...  
Ben Houston 已提交
199 
					color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
M
Minor tweaks.  
Mr.doob 已提交
200 
					side: THREE.DoubleSide, vertexColors: THREE.VertexColors
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
201 202 203 204 205 206 207 208 
				} );

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

				//

				renderer = new THREE.WebGLRenderer( { antialias: false } );
M
Examples: Added setPixelRatio(). See #5627.  
Mr.doob 已提交
209 
				renderer.setPixelRatio( window.devicePixelRatio );
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
210 211 212 213 214 215 216 217 218 219 
				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 已提交
220 
				container.appendChild( stats.dom );
M
Added Uint Indexed BufferGeometry example.  
Mr.doob 已提交
221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 

				//

				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>