devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML3D立体城市特效代码_html3d代码

作者：IT小白 | 2024-07-16 14:26:30

赞

踩

html3d代码

HTML3D立体城市特效代码

鼠标可以控制“行走”方向，立体性很强

index.html代码如下

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>3D城市</title>
  6.  
  7. <style>
  8. html {
  9. 	overflow: hidden;
  10. 	touch-action: none;
  11. 	content-zooming: none;
  12. }
  13.  
  14. body {
  15. 	position: absolute;
  16. 	margin: 0;
  17. 	padding: 0;
  18. 	width: 100%;
  19. 	height: 100%;
  20. 	background: #000;
  21. }
  22.  
  23. #canvas {
  24. 	position: absolute;
  25. 	width: 100%;
  26. 	height: 100%;
  27. 	background: #000;
  28. 	cursor: crosshair;
  29. }</style>
  30. </head>
  31. <body>
  32.  
  33. <canvas id="canvas"></canvas>
  34. <!-- GLSL shaders in the header -->
  35.  
  36. <script id="shader-vs" type="x-shader/x-vertex">
  37.  
  38. 	attribute vec3 aVertexPosition;
  39. 	attribute vec3 aVertexNormal;
  40. 	uniform mat4 uMVMatrix;
  41. 	uniform mat4 uPMatrix;
  42. 	uniform mat3 uNMatrix;
  43. 	varying vec3 vNormal;
  44. 	varying vec4 vPosition;
  45. 	varying vec3 vPos;
  46.  
  47. 	void main(void) {
  48. 		vPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
  49. 		gl_Position = uPMatrix * vPosition;
  50. 		vNormal = uNMatrix * aVertexNormal;
  51. 		vPos = aVertexPosition;
  52. 	}
  53.  
  54. </script>
  55.  
  56. <script id="shader-fs" type="x-shader/x-fragment">
  57.  
  58. 	precision mediump float;
  59. 	varying vec3 vNormal;
  60. 	varying vec4 vPosition;
  61. 	uniform vec3 uAmbientColor;
  62. 	uniform vec3 uPointLightingLocation;
  63. 	uniform vec3 uPointLightingSpecularColor;
  64. 	uniform vec3 uPointLightingDiffuseColor;
  65. 	uniform vec2 uResolution;
  66. 	varying vec3 vPos;
  67.  
  68.  
  69.  
  70. 	void main(void) {
  71. 		vec3 col;
  72. 		if (vPos.y < 0.0) {
  73. 			col = vec3(0.3, 0.2, 0.1);
  74. 		} else {
  75. 			col = vec3(1.0, 1.0, 1.0);
  76. 		}
  77. 		vec3 lightDirection = normalize(uPointLightingLocation - vPosition.xyz);
  78. 		vec3 normal = normalize(vNormal);
  79. 		vec3 eyeDirection = normalize(-vPosition.xyz);
  80. 		vec3 reflectionDirection = reflect(-lightDirection, normal);
  81. 		float specularLightWeighting = pow(max(dot(reflectionDirection, eyeDirection), 0.0), 6.0);
  82. 		float diffuseLightWeighting = max(dot(normal, lightDirection), 0.0);
  83. 		col *= uAmbientColor
  84. 		+ uPointLightingSpecularColor * specularLightWeighting
  85. 		+ uPointLightingDiffuseColor * diffuseLightWeighting;
  86. 		vec2 uv = gl_FragCoord.xy / uResolution;
  87. 		float d = length(uv - vec2(0.5,0.5));
  88. 		col *= 2.5 - d * 3.5;
  89. 		gl_FragColor = vec4(col.x, col.y, col.z, 1.0);
  90. 	}
  91.  
  92. </script>
  93.  
  94.  
  95.  
  96. <script>
  97.  
  98. // WebGL micro-library
  99. // Gerard Ferrandez
  100. // last modified: 29/Mar/2016
  101.  
  102. var webgl = {};
  103.  
  104. (function() {
  105.  
  106. 	// webgl matrix 3x3
  107.  
  108. 	function mat3 () {
  109.  
  110. 		var mat = new Float32Array([1,0,0,0,1,0,0,0,1]);
  111.  
  112. 		mat.identity = function() {
  113. 			this[0] = 1;
  114. 			this[1] = 0;
  115. 			this[2] = 0;
  116. 			this[3] = 0;
  117. 			this[4] = 1;
  118. 			this[5] = 0;
  119. 			this[6] = 0;
  120. 			this[7] = 0;
  121. 			this[8] = 1;
  122. 			return this;
  123. 		}
  124.  
  125. 		mat.normalFromMat4 = function (a) {
  126. 			var 
  127. 			a00 = a[0],  a01 = a[1],  a02 = a[2],  a03 = a[3],
  128. 			a10 = a[4],  a11 = a[5],  a12 = a[6],  a13 = a[7],
  129. 			a20 = a[8],  a21 = a[9],  a22 = a[10], a23 = a[11],
  130. 			a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15],
  131. 			b00 = a00 * a11 - a01 * a10,
  132. 			b01 = a00 * a12 - a02 * a10,
  133. 			b02 = a00 * a13 - a03 * a10,
  134. 			b03 = a01 * a12 - a02 * a11,
  135. 			b04 = a01 * a13 - a03 * a11,
  136. 			b05 = a02 * a13 - a03 * a12,
  137. 			b06 = a20 * a31 - a21 * a30,
  138. 			b07 = a20 * a32 - a22 * a30,
  139. 			b08 = a20 * a33 - a23 * a30,
  140. 			b09 = a21 * a32 - a22 * a31,
  141. 			b10 = a21 * a33 - a23 * a31,
  142. 			b11 = a22 * a33 - a23 * a32,
  143. 			det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
  144. 			if (!det) return null;
  145. 			det = 1.0 / det;
  146. 			this[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
  147. 			this[1] = (a12 * b08 - a10 * b11 - a13 * b07) * det;
  148. 			this[2] = (a10 * b10 - a11 * b08 + a13 * b06) * det;
  149. 			this[3] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
  150. 			this[4] = (a00 * b11 - a02 * b08 + a03 * b07) * det;
  151. 			this[5] = (a01 * b08 - a00 * b10 - a03 * b06) * det;
  152. 			this[6] = (a31 * b05 - a32 * b04 + a33 * b03) * det;
  153. 			this[7] = (a32 * b02 - a30 * b05 - a33 * b01) * det;
  154. 			this[8] = (a30 * b04 - a31 * b02 + a33 * b00) * det;
  155. 			return this;
  156. 		}
  157. 		return mat;
  158. 	}
  159.  
  160. 	// webgl matrix 4x4
  161.  
  162. 	function mat4 () {
  163.  
  164. 		var mat = new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]);
  165.  
  166. 		mat.identity = function() {
  167. 			this[0] = 1;
  168. 			this[1] = 0;
  169. 			this[2] = 0;
  170. 			this[3] = 0;
  171. 			this[4] = 0;
  172. 			this[5] = 1;
  173. 			this[6] = 0;
  174. 			this[7] = 0;
  175. 			this[8] = 0;
  176. 			this[9] = 0;
  177. 			this[10] = 1;
  178. 			this[11] = 0;
  179. 			this[12] = 0;
  180. 			this[13] = 0;
  181. 			this[14] = 0;
  182. 			this[15] = 1;
  183. 			return this;
  184. 		};
  185.  
  186. 		mat.translate = function(v) {
  187. 			var d = v[0],
  188. 				e = v[1],
  189. 				b = v[2];
  190. 			this[12] = this[0] * d + this[4] * e + this[8] * b + this[12];
  191. 			this[13] = this[1] * d + this[5] * e + this[9] * b + this[13];
  192. 			this[14] = this[2] * d + this[6] * e + this[10] * b + this[14];
  193. 			this[15] = this[3] * d + this[7] * e + this[11] * b + this[15];
  194. 			return this;
  195. 		};
  196.  
  197. 		mat.fromTranslation = function(v) {
  198. 			this[0] = 1;
  199. 			this[1] = 0;
  200. 			this[2] = 0;
  201. 			this[3] = 0;
  202. 			this[4] = 0;
  203. 			this[5] = 1;
  204. 			this[6] = 0;
  205. 			this[7] = 0;
  206. 			this[8] = 0;
  207. 			this[9] = 0;
  208. 			this[10] = 1;
  209. 			this[11] = 0;
  210. 			this[12] = v[0];
  211. 			this[13] = v[1];
  212. 			this[14] = v[2];
  213. 			this[15] = 1;
  214. 			return this;
  215. 		};
  216.  
  217. 		mat.rotateX = function (angle) {
  218. 			var s = Math.sin(angle),
  219. 				c = Math.cos(angle),
  220. 			a10 = this[4],
  221. 			a11 = this[5],
  222. 			a12 = this[6],
  223. 			a13 = this[7],
  224. 			a20 = this[8],
  225. 			a21 = this[9],
  226. 			a22 = this[10],
  227. 			a23 = this[11];
  228. 			this[4] = a10 * c + a20 * s;
  229. 			this[5] = a11 * c + a21 * s;
  230. 			this[6] = a12 * c + a22 * s;
  231. 			this[7] = a13 * c + a23 * s;
  232. 			this[8] = a20 * c - a10 * s;
  233. 			this[9] = a21 * c - a11 * s;
  234. 			this[10] = a22 * c - a12 * s;
  235. 			this[11] = a23 * c - a13 * s;
  236. 			return this;
  237. 		};
  238.  
  239. 		mat.rotateY = function (angle) {
  240. 			var s = Math.sin(angle),
  241. 				c = Math.cos(angle),
  242. 			a00 = this[0],
  243. 			a01 = this[1],
  244. 			a02 = this[2],
  245. 			a03 = this[3],
  246. 			a20 = this[8],
  247. 			a21 = this[9],
  248. 			a22 = this[10],
  249. 			a23 = this[11];
  250. 			this[0] = a00 * c - a20 * s;
  251. 			this[1] = a01 * c - a21 * s;
  252. 			this[2] = a02 * c - a22 * s;
  253. 			this[3] = a03 * c - a23 * s;
  254. 			this[8] = a00 * s + a20 * c;
  255. 			this[9] = a01 * s + a21 * c;
  256. 			this[10] = a02 * s + a22 * c;
  257. 			this[11] = a03 * s + a23 * c;
  258. 			return this;
  259. 		};
  260.  
  261. 		mat.rotateZ = function (angle) {
  262. 			var s = Math.sin(angle),
  263. 				c = Math.cos(angle),
  264. 			a00 = this[0],
  265. 			a01 = this[1],
  266. 			a02 = this[2],
  267. 			a03 = this[3],
  268. 			a10 = this[4],
  269. 			a11 = this[5],
  270. 			a12 = this[6],
  271. 			a13 = this[7];
  272. 			this[0] = a00 * c + a10 * s;
  273. 			this[1] = a01 * c + a11 * s;
  274. 			this[2] = a02 * c + a12 * s;
  275. 			this[3] = a03 * c + a13 * s;
  276. 			this[4] = a10 * c - a00 * s;
  277. 			this[5] = a11 * c - a01 * s;
  278. 			this[6] = a12 * c - a02 * s;
  279. 			this[7] = a13 * c - a03 * s;
  280. 			return this;
  281. 		};
  282.  
  283. 		mat.multiply = function (a, b) {
  284. 			var a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3],
  285. 			a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7],
  286. 			a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11],
  287. 			a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15];
  288. 			var b0  = b[0], b1 = b[1], b2 = b[2], b3 = b[3];
  289. 			this[0] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
  290. 			this[1] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
  291. 			this[2] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
  292. 			this[3] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
  293. 			b0 = b[4]; b1 = b[5]; b2 = b[6]; b3 = b[7];
  294. 			this[4] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
  295. 			this[5] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
  296. 			this[6] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
  297. 			this[7] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
  298. 			b0 = b[8]; b1 = b[9]; b2 = b[10]; b3 = b[11];
  299. 			this[8] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
  300. 			this[9] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
  301. 			this[10] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
  302. 			this[11] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
  303. 			b0 = b[12]; b1 = b[13]; b2 = b[14]; b3 = b[15];
  304. 			this[12] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
  305. 			this[13] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
  306. 			this[14] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
  307. 			this[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
  308. 			return this;
  309. 		};
  310.  
  311. 		mat.frustum = function(a, b, c, d, e, g) {
  312. 			var h = b - a,
  313. 				i = d - c,
  314. 				j = g - e;
  315. 			this[0] = e * 2 / h;
  316. 			this[1] = 0;
  317. 			this[2] = 0;
  318. 			this[3] = 0;
  319. 			this[4] = 0;
  320. 			this[5] = e * 2 / i;
  321. 			this[6] = 0;
  322. 			this[7] = 0;
  323. 			this[8] = (b + a) / h;
  324. 			this[9] = (d + c) / i;
  325. 			this[10] = -(g + e) / j;
  326. 			this[11] = -1;
  327. 			this[12] = 0;
  328. 			this[13] = 0;
  329. 			this[14] = -(g * e * 2) / j;
  330. 			this[15] = 0;
  331. 			return this;
  332. 		};
  333.  
  334. 		mat.perspective = function(a, b, c, d) {
  335. 			a = c * Math.tan(a * Math.PI / 360);
  336. 			b = a * b;
  337. 			this.frustum(-b, b, -a, a, c, d);
  338. 			return this;
  339. 		};
  340. 		return mat;
  341. 	}
  342.  
  343. 	// set uniforms
  344.  
  345. 	function setUniforms (gl, program) {
  346.  
  347. 		var uniformSetters = {
  348. 			0x8B50: function(v1,v2)			{gl.uniform2f(this.index,v1,v2);},
  349. 			0x8B51: function(v1,v2,v3)		{gl.uniform3f(this.index,v1,v2,v3);},
  350. 			0x8B52: function(v1,v2,v3,v4)	{gl.uniform4f(this.index,v1,v2,v3,v4);},
  351. 			0x8B53: function(v1,v2)			{gl.uniform2i(this.index,v1,v2);},
  352. 			0x8B54: function(v1,v2,v3)		{gl.uniform3i(this.index,v1,v2,v3);},
  353. 			0x8B55: function(v1,v2,v3,v4)	{gl.uniform4i(this.index,v1,v2,v3,v4);},
  354. 			0x8B56: function(v)				{gl.uniform1i(this.index,v);},
  355. 			0x8B5A: function(v)				{gl.uniformMatrix2fv(this.index,false,v);},
  356. 			0x8B5B: function(v)				{gl.uniformMatrix3fv(this.index,false,v);},
  357. 			0x8B5C: function(v)				{gl.uniformMatrix4fv(this.index,false,v);},
  358. 			0x8B5E: function(v)				{gl.uniform1i(this.index,v);},
  359. 			0x1404: function(v)				{gl.uniform1i(this.index,v);},
  360. 			0x1406: function(v)				{gl.uniform1f(this.index,v);}
  361. 		},
  362.  
  363. 		num = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS),
  364. 		uniforms = {};
  365.  
  366. 		for (var i = 0; i < num; i++) {
  367. 			var u = gl.getActiveUniform(program, i);
  368. 			uniforms[u.name] = {
  369. 				index: gl.getUniformLocation(program, u.name),
  370. 				set: uniformSetters[u.type],
  371. 				get: function () {
  372. 					return gl.getUniform(program, this.index);
  373. 				}
  374. 			};
  375. 		}
  376.  
  377. 		return uniforms;
  378. 	}
  379.  
  380. 	// set attributes
  381.  
  382. 	function setAttributes (gl, program) {
  383.  
  384. 		var num = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES), attributes = {};
  385.  
  386. 		for (var i = 0; i < num; i++) {
  387.  
  388. 			var a = gl.getActiveAttrib(program, i)
  389. 			var index = gl.getAttribLocation(program, a.name);
  390. 			gl.enableVertexAttribArray(index);
  391.  
  392. 			attributes[a.name] = {
  393. 				buffer: gl.createBuffer(),
  394. 				index: index,
  395. 				gl: gl,
  396. 				numElements: 0,
  397.  
  398. 				load: function (data, size, normalize) {
  399. 					var gl = this.gl;
  400. 					this.data = data instanceof Array ? new Float32Array(data) : data;
  401. 					this.itemSize = size;
  402. 					gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
  403. 					gl.bufferData(gl.ARRAY_BUFFER, this.data, gl.STATIC_DRAW);
  404. 					this.numElements = this.data.length / this.itemSize;
  405. 					gl.vertexAttribPointer(
  406. 						this.index, 
  407. 						this.itemSize, 
  408. 						gl.FLOAT, 
  409. 						normalize || false, 0, 0
  410. 					);
  411. 				}
  412.  
  413. 			};
  414. 		}
  415.  
  416. 		return attributes;
  417. 	};
  418.  
  419. 	// indexed geometry buffer
  420.  
  421. 	function setIndices (gl) {
  422.  
  423. 		var indices = {
  424. 			buffer: null,
  425. 			gl: gl,
  426. 			numElements: 0,
  427. 			load: function (data) {
  428. 				this.data = data instanceof Array ? new Uint16Array(data) : data;
  429. 				if (!this.buffer) this.buffer = this.gl.createBuffer();
  430. 				this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.buffer);
  431. 				this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, this.data, this.gl.STATIC_DRAW);
  432. 				this.numElements = data.length;
  433. 			}
  434. 		};
  435.  
  436. 		return indices;
  437.  
  438. 	}
  439.  
  440. 	// compile shaders
  441.  
  442. 	function compile (gl, vs, fs) {
  443.  
  444. 		// compile vertex shader
  445.  
  446. 		var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  447. 		gl.shaderSource(vertexShader, document.getElementById(vs).text);
  448. 		gl.compileShader(vertexShader);
  449.  
  450. 		// compile fragment shader
  451.  
  452. 		var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  453. 		gl.shaderSource(fragmentShader, document.getElementById(fs).text);
  454. 		gl.compileShader(fragmentShader);
  455.  
  456. 		// attach shader programs
  457.  
  458. 		var program = gl.createProgram();
  459. 		gl.attachShader(program, vertexShader);
  460. 		gl.attachShader(program, fragmentShader);
  461. 		gl.linkProgram(program);
  462. 		if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error("Unable to compile shaders!");
  463. 		gl.useProgram(program);
  464. 		return program;
  465.  
  466. 	};
  467.  
  468. 	// initialize context
  469.  
  470. 	this.context = function (id, options) {
  471.  
  472. 		// canvas container
  473.  
  474. 		this.canvas = document.getElementById(id);
  475. 		canvas.width = this.width  = this.canvas.offsetWidth;
  476. 		canvas.height = this.height = this.canvas.offsetHeight;
  477.  
  478. 		// webgl context
  479.  
  480. 		var gl = this.canvas.getContext("webgl", options);
  481. 		if (!gl) gl = this.canvas.getContext("experimental-webgl");
  482. 		if (!gl) throw new Error('This browser does not support WebGL');
  483. 		this.gl = gl;
  484.  
  485. 		// compile shaders
  486.  
  487. 		var program     = compile(gl, "shader-vs", "shader-fs");
  488.  
  489. 		// set uniforms and attributes
  490.  
  491. 		this.uniforms   = setUniforms(gl, program);
  492. 		this.attributes = setAttributes(gl, program);
  493. 		this.indices    = setIndices(gl);
  494. 		this.camera     = setCamera();
  495.  
  496. 		return gl;
  497. 	}
  498.  
  499. 	// clear screen
  500.  
  501. 	this.clear = function (r, g, b) {
  502. 		this.gl.viewport(0, 0, this.gl.drawingBufferWidth, this.gl.drawingBufferHeight);
  503. 		this.gl.clearColor(r || 0, g || 0, b || 0, 1);
  504. 		this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
  505. 	}
  506. 	
  507. 	// camera
  508.  
  509. 	function setCamera () {
  510.  
  511. 		var camera = {};
  512. 		camera.webgl = webgl;
  513. 		camera.fov = 90;
  514. 		camera.mvMatrix = mat4();
  515. 		camera.currentRotationMatrix = mat4();
  516. 		camera.newRotationMatrix = mat4();
  517. 		camera.pMatrix = mat4();
  518. 		camera.normalMatrix = mat3();
  519.  
  520. 		camera.init = function (fov) {
  521. 			this.fov = fov || 90;
  522. 			var width = this.webgl.width,
  523. 				height = this.webgl.height;
  524. 			this.pMatrix.perspective(this.fov, width / height, 0.01, 100.0);
  525. 			this.webgl.uniforms.uPMatrix.set(this.pMatrix);
  526. 			if (webgl.uniforms.uResolution) webgl.uniforms.uResolution.set(width, height);
  527. 			return this;
  528. 		};
  529.  
  530. 		return camera;
  531. 	}
  532.  
  533. }).apply(webgl);
  534.  
  535. </script>
  536.  
  537. <script>
  538. ~ function() { 
  539.  
  540. 	'use strict';
  541.  
  542. 	function run() {
  543.  
  544. 		requestAnimationFrame(run);
  545. 		webgl.clear(0, 0.05, 0.1);
  546.  
  547. 		if (pointer.isDown) {
  548. 			cx += (pointer.x - pointer.xb) / 2000;
  549. 			cy += (pointer.y - pointer.yb) / 2000;
  550. 			cz = 0.015;
  551. 		}
  552.  
  553. 		cx *= 0.98;
  554. 		cy *= 0.98;
  555. 		cz *= 0.98;
  556.  
  557. 		camera.move(cx, cy, cz+0.01);
  558. 		gl.drawArrays(gl.TRIANGLES, 0, 30 * nCubes);
  559.  
  560. 		pointer.xb = pointer.x;
  561. 		pointer.yb = pointer.y;
  562.  
  563. 	}
  564.  
  565. 	// init
  566.  
  567. 	var size = 64, 
  568. 		vertices = new Float32Array(90 + 90 * size * size), 
  569. 		normals = new Float32Array(90 + 90 * size * size),
  570. 		nCubes = 0, cx = 0, cy = 0, cz = 0;
  571.  
  572. 	// webgl
  573. 	var gl = webgl.context('canvas');
  574. 	gl.enable(gl.DEPTH_TEST);
  575. 	gl.enable(gl.CULL_FACE);
  576.  
  577. 	// create cubes
  578.  
  579. 	function createCube (x, y, z, l, h, w) {
  580.  
  581. 		l /= 2;
  582. 		w /= 2;
  583. 		h /= 2;
  584.  
  585. 		// vertices
  586.  
  587. 		vertices.set([
  588. 			x-l,y-h,z+w,x+l,y-h,z+w,x+l,y+h,z+w,x-l,y-h,z+w,x+l,y+h,z+w,x-l,y+h,z+w,
  589. 			x-l,y-h,z-w,x-l,y+h,z-w,x+l,y+h,z-w,x-l,y-h,z-w,x+l,y+h,z-w,x+l,y-h,z-w,
  590. 			x-l,y+h,z-w,x-l,y+h,z+w,x+l,y+h,z+w,x-l,y+h,z-w,x+l,y+h,z+w,x+l,y+h,z-w,
  591. 			x+l,y-h,z-w,x+l,y+h,z-w,x+l,y+h,z+w,x+l,y-h,z-w,x+l,y+h,z+w,x+l,y-h,z+w,
  592. 			x-l,y-h,z-w,x-l,y-h,z+w,x-l,y+h,z+w,x-l,y-h,z-w,x-l,y+h,z+w,x-l,y+h,z-w
  593. 		], nCubes * 5 * 18);
  594.  
  595. 		// normals
  596.  
  597. 		normals.set([
  598. 			0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,
  599. 			0,0,-1,0,0,-1,0,0,-1,0,0,-1,0,0,-1,0,0,-1,
  600. 			0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,
  601. 			1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,
  602. 			-1,0,0,-1,0,0,-1,0,0,-1,0,0,-1,0,0,-1,0,0
  603. 		], nCubes * 5 * 18);
  604.  
  605. 		nCubes++;
  606.  
  607. 	}
  608.  
  609. 	// create pointer
  610.  
  611. 	var pointer = {
  612. 		x: 0,
  613. 		y: 0,
  614. 		xb: 0,
  615. 		yb: 0,
  616. 		isDown: false,
  617. 		add: function(elem, events, fn) {
  618. 			for (var i = 0, e = events.split(','); i < e.length; i++) {
  619. 				elem.addEventListener(e[i], fn.bind(pointer), false);
  620. 			}
  621. 		},
  622. 		pointer: function(e) {
  623. 			var touchMode = e.targetTouches, pointer;
  624. 			if (touchMode) {
  625. 				e.preventDefault();
  626. 				pointer = touchMode[0];
  627. 			} else pointer = e;
  628. 			this.x = pointer.clientX;
  629. 			this.y = pointer.clientY;
  630. 		}
  631. 	};
  632.  
  633. 	// pointer events
  634.  
  635. 	pointer.add(window, 'mousemove,touchmove', function(e) {this.pointer(e);});
  636. 	pointer.add(webgl.canvas, 'mousedown,touchstart', function(e) {
  637. 		this.pointer(e);
  638. 		this.xb = this.x;
  639. 		this.yb = this.y;
  640. 		this.isDown = true;
  641. 	});
  642. 	pointer.add(window, 'mouseup,touchend,touchcancel', function(e) {this.isDown = false;});
  643.  
  644. 	// camera
  645. 	
  646. 	var camera = webgl.camera.init(60);
  647. 	camera.x = 0;
  648. 	camera.y = -2;
  649. 	camera.z = size / 3;
  650. 	camera.ax = 0;
  651. 	camera.ay = 0;
  652.  
  653. 	camera.move = function (deltaX, deltaY, deltaZ) {
  654.  
  655. 		this.ax -= deltaX / 10;
  656. 		this.ay -= deltaY / 10;
  657.  
  658. 		this.x -= Math.sin(this.ax) * deltaZ;
  659. 		this.z -= Math.cos(this.ax) * deltaZ;
  660. 		this.y -= Math.sin(this.ay) * deltaZ;
  661.  
  662. 		if (this.y > -0.5) this.y = -0.5; 
  663. 		if (this.x > size * 0.5) this.x = size * 0.5; else if (this.x < -size * 0.5) this.x = -size * 0.5;
  664. 		if (this.z > size * 0.5) this.z = size * 0.5; else if (this.z < -size * 0.5) this.z = -size * 0.5;
  665.  
  666. 		this.mvMatrix.identity().rotateX(-this.ay).rotateY(-this.ax).translate([-this.x, this.y, -this.z]);
  667.  
  668. 		this.webgl.uniforms.uMVMatrix.set(this.mvMatrix);
  669. 		this.normalMatrix.normalFromMat4(this.mvMatrix);
  670. 		this.webgl.uniforms.uNMatrix.set(this.normalMatrix);
  671.  
  672. 	};
  673.  
  674. 	// create world
  675.  
  676. 	createCube(0, -0.1, 0, size * 20, 0.1, size * 20);
  677.  
  678. 	for (var x = 0; x < size; x++) {
  679. 		for (var y = 0; y < size; y++) {
  680. 			var xf = x - size * 0.5,
  681. 				yf = y - size * 0.5,
  682. 				d = Math.sqrt(xf * xf + yf * yf),
  683. 				h = 0.25 + 30 * Math.random() / d,
  684. 				w = 0.7;
  685. 			if (d < size * 0.5) createCube(xf, h * 0.5, yf, w, h, w);
  686. 		}
  687. 	}
  688.  
  689. 	webgl.attributes.aVertexPosition.load(vertices, 3);
  690. 	webgl.attributes.aVertexNormal.load(normals, 3);
  691.  
  692. 	// set lightning
  693.  
  694. 	webgl.uniforms.uAmbientColor.set(0,0,0);
  695. 	webgl.uniforms.uPointLightingLocation.set(0, -1, -10);
  696. 	webgl.uniforms.uPointLightingSpecularColor.set(1,0.55,0.15);
  697. 	webgl.uniforms.uPointLightingDiffuseColor.set(0,0.25,0.5);
  698.  
  699. 	run();
  700.  
  701. } ();
  702. </script>
  703.  
  704. </body>
  705. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/834655
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号