HTML3D立体城市特效代码

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

index.html代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D城市</title><style>
html {overflow: hidden;touch-action: none;content-zooming: none;
}body {position: absolute;margin: 0;padding: 0;width: 100%;height: 100%;background: #000;
}#canvas {position: absolute;width: 100%;height: 100%;background: #000;cursor: crosshair;
}</style>
</head>
<body><canvas id="canvas"></canvas>
<!-- GLSL shaders in the header --><script id="shader-vs" type="x-shader/x-vertex">attribute vec3 aVertexPosition;attribute vec3 aVertexNormal;uniform mat4 uMVMatrix;uniform mat4 uPMatrix;uniform mat3 uNMatrix;varying vec3 vNormal;varying vec4 vPosition;varying vec3 vPos;void main(void) {vPosition = uMVMatrix * vec4(aVertexPosition, 1.0);gl_Position = uPMatrix * vPosition;vNormal = uNMatrix * aVertexNormal;vPos = aVertexPosition;}</script><script id="shader-fs" type="x-shader/x-fragment">precision mediump float;varying vec3 vNormal;varying vec4 vPosition;uniform vec3 uAmbientColor;uniform vec3 uPointLightingLocation;uniform vec3 uPointLightingSpecularColor;uniform vec3 uPointLightingDiffuseColor;uniform vec2 uResolution;varying vec3 vPos;void main(void) {vec3 col;if (vPos.y < 0.0) {col = vec3(0.3, 0.2, 0.1);} else {col = vec3(1.0, 1.0, 1.0);}vec3 lightDirection = normalize(uPointLightingLocation - vPosition.xyz);vec3 normal = normalize(vNormal);vec3 eyeDirection = normalize(-vPosition.xyz);vec3 reflectionDirection = reflect(-lightDirection, normal);float specularLightWeighting = pow(max(dot(reflectionDirection, eyeDirection), 0.0), 6.0);float diffuseLightWeighting = max(dot(normal, lightDirection), 0.0);col *= uAmbientColor+ uPointLightingSpecularColor * specularLightWeighting+ uPointLightingDiffuseColor * diffuseLightWeighting;vec2 uv = gl_FragCoord.xy / uResolution;float d = length(uv - vec2(0.5,0.5));col *= 2.5 - d * 3.5;gl_FragColor = vec4(col.x, col.y, col.z, 1.0);}</script><script>// WebGL micro-library
// Gerard Ferrandez
// last modified: 29/Mar/2016var webgl = {};(function() {// webgl matrix 3x3function mat3 () {var mat = new Float32Array([1,0,0,0,1,0,0,0,1]);mat.identity = function() {this[0] = 1;this[1] = 0;this[2] = 0;this[3] = 0;this[4] = 1;this[5] = 0;this[6] = 0;this[7] = 0;this[8] = 1;return this;}mat.normalFromMat4 = function (a) {var a00 = a[0],  a01 = a[1],  a02 = a[2],  a03 = a[3],a10 = a[4],  a11 = a[5],  a12 = a[6],  a13 = a[7],a20 = a[8],  a21 = a[9],  a22 = a[10], a23 = a[11],a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15],b00 = a00 * a11 - a01 * a10,b01 = a00 * a12 - a02 * a10,b02 = a00 * a13 - a03 * a10,b03 = a01 * a12 - a02 * a11,b04 = a01 * a13 - a03 * a11,b05 = a02 * a13 - a03 * a12,b06 = a20 * a31 - a21 * a30,b07 = a20 * a32 - a22 * a30,b08 = a20 * a33 - a23 * a30,b09 = a21 * a32 - a22 * a31,b10 = a21 * a33 - a23 * a31,b11 = a22 * a33 - a23 * a32,det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;if (!det) return null;det = 1.0 / det;this[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;this[1] = (a12 * b08 - a10 * b11 - a13 * b07) * det;this[2] = (a10 * b10 - a11 * b08 + a13 * b06) * det;this[3] = (a02 * b10 - a01 * b11 - a03 * b09) * det;this[4] = (a00 * b11 - a02 * b08 + a03 * b07) * det;this[5] = (a01 * b08 - a00 * b10 - a03 * b06) * det;this[6] = (a31 * b05 - a32 * b04 + a33 * b03) * det;this[7] = (a32 * b02 - a30 * b05 - a33 * b01) * det;this[8] = (a30 * b04 - a31 * b02 + a33 * b00) * det;return this;}return mat;}// webgl matrix 4x4function mat4 () {var mat = new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]);mat.identity = function() {this[0] = 1;this[1] = 0;this[2] = 0;this[3] = 0;this[4] = 0;this[5] = 1;this[6] = 0;this[7] = 0;this[8] = 0;this[9] = 0;this[10] = 1;this[11] = 0;this[12] = 0;this[13] = 0;this[14] = 0;this[15] = 1;return this;};mat.translate = function(v) {var d = v[0],e = v[1],b = v[2];this[12] = this[0] * d + this[4] * e + this[8] * b + this[12];this[13] = this[1] * d + this[5] * e + this[9] * b + this[13];this[14] = this[2] * d + this[6] * e + this[10] * b + this[14];this[15] = this[3] * d + this[7] * e + this[11] * b + this[15];return this;};mat.fromTranslation = function(v) {this[0] = 1;this[1] = 0;this[2] = 0;this[3] = 0;this[4] = 0;this[5] = 1;this[6] = 0;this[7] = 0;this[8] = 0;this[9] = 0;this[10] = 1;this[11] = 0;this[12] = v[0];this[13] = v[1];this[14] = v[2];this[15] = 1;return this;};mat.rotateX = function (angle) {var s = Math.sin(angle),c = Math.cos(angle),a10 = this[4],a11 = this[5],a12 = this[6],a13 = this[7],a20 = this[8],a21 = this[9],a22 = this[10],a23 = this[11];this[4] = a10 * c + a20 * s;this[5] = a11 * c + a21 * s;this[6] = a12 * c + a22 * s;this[7] = a13 * c + a23 * s;this[8] = a20 * c - a10 * s;this[9] = a21 * c - a11 * s;this[10] = a22 * c - a12 * s;this[11] = a23 * c - a13 * s;return this;};mat.rotateY = function (angle) {var s = Math.sin(angle),c = Math.cos(angle),a00 = this[0],a01 = this[1],a02 = this[2],a03 = this[3],a20 = this[8],a21 = this[9],a22 = this[10],a23 = this[11];this[0] = a00 * c - a20 * s;this[1] = a01 * c - a21 * s;this[2] = a02 * c - a22 * s;this[3] = a03 * c - a23 * s;this[8] = a00 * s + a20 * c;this[9] = a01 * s + a21 * c;this[10] = a02 * s + a22 * c;this[11] = a03 * s + a23 * c;return this;};mat.rotateZ = function (angle) {var s = Math.sin(angle),c = Math.cos(angle),a00 = this[0],a01 = this[1],a02 = this[2],a03 = this[3],a10 = this[4],a11 = this[5],a12 = this[6],a13 = this[7];this[0] = a00 * c + a10 * s;this[1] = a01 * c + a11 * s;this[2] = a02 * c + a12 * s;this[3] = a03 * c + a13 * s;this[4] = a10 * c - a00 * s;this[5] = a11 * c - a01 * s;this[6] = a12 * c - a02 * s;this[7] = a13 * c - a03 * s;return this;};mat.multiply = function (a, b) {var a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3],a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7],a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11],a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15];var b0  = b[0], b1 = b[1], b2 = b[2], b3 = b[3];this[0] = b0*a00 + b1*a10 + b2*a20 + b3*a30;this[1] = b0*a01 + b1*a11 + b2*a21 + b3*a31;this[2] = b0*a02 + b1*a12 + b2*a22 + b3*a32;this[3] = b0*a03 + b1*a13 + b2*a23 + b3*a33;b0 = b[4]; b1 = b[5]; b2 = b[6]; b3 = b[7];this[4] = b0*a00 + b1*a10 + b2*a20 + b3*a30;this[5] = b0*a01 + b1*a11 + b2*a21 + b3*a31;this[6] = b0*a02 + b1*a12 + b2*a22 + b3*a32;this[7] = b0*a03 + b1*a13 + b2*a23 + b3*a33;b0 = b[8]; b1 = b[9]; b2 = b[10]; b3 = b[11];this[8] = b0*a00 + b1*a10 + b2*a20 + b3*a30;this[9] = b0*a01 + b1*a11 + b2*a21 + b3*a31;this[10] = b0*a02 + b1*a12 + b2*a22 + b3*a32;this[11] = b0*a03 + b1*a13 + b2*a23 + b3*a33;b0 = b[12]; b1 = b[13]; b2 = b[14]; b3 = b[15];this[12] = b0*a00 + b1*a10 + b2*a20 + b3*a30;this[13] = b0*a01 + b1*a11 + b2*a21 + b3*a31;this[14] = b0*a02 + b1*a12 + b2*a22 + b3*a32;this[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33;return this;};mat.frustum = function(a, b, c, d, e, g) {var h = b - a,i = d - c,j = g - e;this[0] = e * 2 / h;this[1] = 0;this[2] = 0;this[3] = 0;this[4] = 0;this[5] = e * 2 / i;this[6] = 0;this[7] = 0;this[8] = (b + a) / h;this[9] = (d + c) / i;this[10] = -(g + e) / j;this[11] = -1;this[12] = 0;this[13] = 0;this[14] = -(g * e * 2) / j;this[15] = 0;return this;};mat.perspective = function(a, b, c, d) {a = c * Math.tan(a * Math.PI / 360);b = a * b;this.frustum(-b, b, -a, a, c, d);return this;};return mat;}// set uniformsfunction setUniforms (gl, program) {var uniformSetters = {0x8B50: function(v1,v2)         {gl.uniform2f(this.index,v1,v2);},0x8B51: function(v1,v2,v3)        {gl.uniform3f(this.index,v1,v2,v3);},0x8B52: function(v1,v2,v3,v4)  {gl.uniform4f(this.index,v1,v2,v3,v4);},0x8B53: function(v1,v2)         {gl.uniform2i(this.index,v1,v2);},0x8B54: function(v1,v2,v3)        {gl.uniform3i(this.index,v1,v2,v3);},0x8B55: function(v1,v2,v3,v4)  {gl.uniform4i(this.index,v1,v2,v3,v4);},0x8B56: function(v)             {gl.uniform1i(this.index,v);},0x8B5A: function(v)               {gl.uniformMatrix2fv(this.index,false,v);},0x8B5B: function(v)              {gl.uniformMatrix3fv(this.index,false,v);},0x8B5C: function(v)              {gl.uniformMatrix4fv(this.index,false,v);},0x8B5E: function(v)              {gl.uniform1i(this.index,v);},0x1404: function(v)               {gl.uniform1i(this.index,v);},0x1406: function(v)               {gl.uniform1f(this.index,v);}},num = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS),uniforms = {};for (var i = 0; i < num; i++) {var u = gl.getActiveUniform(program, i);uniforms[u.name] = {index: gl.getUniformLocation(program, u.name),set: uniformSetters[u.type],get: function () {return gl.getUniform(program, this.index);}};}return uniforms;}// set attributesfunction setAttributes (gl, program) {var num = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES), attributes = {};for (var i = 0; i < num; i++) {var a = gl.getActiveAttrib(program, i)var index = gl.getAttribLocation(program, a.name);gl.enableVertexAttribArray(index);attributes[a.name] = {buffer: gl.createBuffer(),index: index,gl: gl,numElements: 0,load: function (data, size, normalize) {var gl = this.gl;this.data = data instanceof Array ? new Float32Array(data) : data;this.itemSize = size;gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);gl.bufferData(gl.ARRAY_BUFFER, this.data, gl.STATIC_DRAW);this.numElements = this.data.length / this.itemSize;gl.vertexAttribPointer(this.index, this.itemSize, gl.FLOAT, normalize || false, 0, 0);}};}return attributes;};// indexed geometry bufferfunction setIndices (gl) {var indices = {buffer: null,gl: gl,numElements: 0,load: function (data) {this.data = data instanceof Array ? new Uint16Array(data) : data;if (!this.buffer) this.buffer = this.gl.createBuffer();this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.buffer);this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, this.data, this.gl.STATIC_DRAW);this.numElements = data.length;}};return indices;}// compile shadersfunction compile (gl, vs, fs) {// compile vertex shadervar vertexShader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vertexShader, document.getElementById(vs).text);gl.compileShader(vertexShader);// compile fragment shadervar fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader, document.getElementById(fs).text);gl.compileShader(fragmentShader);// attach shader programsvar program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error("Unable to compile shaders!");gl.useProgram(program);return program;};// initialize contextthis.context = function (id, options) {// canvas containerthis.canvas = document.getElementById(id);canvas.width = this.width  = this.canvas.offsetWidth;canvas.height = this.height = this.canvas.offsetHeight;// webgl contextvar gl = this.canvas.getContext("webgl", options);if (!gl) gl = this.canvas.getContext("experimental-webgl");if (!gl) throw new Error('This browser does not support WebGL');this.gl = gl;// compile shadersvar program     = compile(gl, "shader-vs", "shader-fs");// set uniforms and attributesthis.uniforms   = setUniforms(gl, program);this.attributes = setAttributes(gl, program);this.indices    = setIndices(gl);this.camera     = setCamera();return gl;}// clear screenthis.clear = function (r, g, b) {this.gl.viewport(0, 0, this.gl.drawingBufferWidth, this.gl.drawingBufferHeight);this.gl.clearColor(r || 0, g || 0, b || 0, 1);this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);}// camerafunction setCamera () {var camera = {};camera.webgl = webgl;camera.fov = 90;camera.mvMatrix = mat4();camera.currentRotationMatrix = mat4();camera.newRotationMatrix = mat4();camera.pMatrix = mat4();camera.normalMatrix = mat3();camera.init = function (fov) {this.fov = fov || 90;var width = this.webgl.width,height = this.webgl.height;this.pMatrix.perspective(this.fov, width / height, 0.01, 100.0);this.webgl.uniforms.uPMatrix.set(this.pMatrix);if (webgl.uniforms.uResolution) webgl.uniforms.uResolution.set(width, height);return this;};return camera;}}).apply(webgl);</script><script>
~ function() { 'use strict';function run() {requestAnimationFrame(run);webgl.clear(0, 0.05, 0.1);if (pointer.isDown) {cx += (pointer.x - pointer.xb) / 2000;cy += (pointer.y - pointer.yb) / 2000;cz = 0.015;}cx *= 0.98;cy *= 0.98;cz *= 0.98;camera.move(cx, cy, cz+0.01);gl.drawArrays(gl.TRIANGLES, 0, 30 * nCubes);pointer.xb = pointer.x;pointer.yb = pointer.y;}// initvar size = 64, vertices = new Float32Array(90 + 90 * size * size), normals = new Float32Array(90 + 90 * size * size),nCubes = 0, cx = 0, cy = 0, cz = 0;// webglvar gl = webgl.context('canvas');gl.enable(gl.DEPTH_TEST);gl.enable(gl.CULL_FACE);// create cubesfunction createCube (x, y, z, l, h, w) {l /= 2;w /= 2;h /= 2;// verticesvertices.set([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,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,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,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,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], nCubes * 5 * 18);// normalsnormals.set([0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,-1,0,0,-1,0,0,-1,0,0,-1,0,0,-1,0,0,-1,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,-1,0,0,-1,0,0,-1,0,0,-1,0,0,-1,0,0,-1,0,0], nCubes * 5 * 18);nCubes++;}// create pointervar pointer = {x: 0,y: 0,xb: 0,yb: 0,isDown: false,add: function(elem, events, fn) {for (var i = 0, e = events.split(','); i < e.length; i++) {elem.addEventListener(e[i], fn.bind(pointer), false);}},pointer: function(e) {var touchMode = e.targetTouches, pointer;if (touchMode) {e.preventDefault();pointer = touchMode[0];} else pointer = e;this.x = pointer.clientX;this.y = pointer.clientY;}};// pointer eventspointer.add(window, 'mousemove,touchmove', function(e) {this.pointer(e);});pointer.add(webgl.canvas, 'mousedown,touchstart', function(e) {this.pointer(e);this.xb = this.x;this.yb = this.y;this.isDown = true;});pointer.add(window, 'mouseup,touchend,touchcancel', function(e) {this.isDown = false;});// cameravar camera = webgl.camera.init(60);camera.x = 0;camera.y = -2;camera.z = size / 3;camera.ax = 0;camera.ay = 0;camera.move = function (deltaX, deltaY, deltaZ) {this.ax -= deltaX / 10;this.ay -= deltaY / 10;this.x -= Math.sin(this.ax) * deltaZ;this.z -= Math.cos(this.ax) * deltaZ;this.y -= Math.sin(this.ay) * deltaZ;if (this.y > -0.5) this.y = -0.5; if (this.x > size * 0.5) this.x = size * 0.5; else if (this.x < -size * 0.5) this.x = -size * 0.5;if (this.z > size * 0.5) this.z = size * 0.5; else if (this.z < -size * 0.5) this.z = -size * 0.5;this.mvMatrix.identity().rotateX(-this.ay).rotateY(-this.ax).translate([-this.x, this.y, -this.z]);this.webgl.uniforms.uMVMatrix.set(this.mvMatrix);this.normalMatrix.normalFromMat4(this.mvMatrix);this.webgl.uniforms.uNMatrix.set(this.normalMatrix);};// create worldcreateCube(0, -0.1, 0, size * 20, 0.1, size * 20);for (var x = 0; x < size; x++) {for (var y = 0; y < size; y++) {var xf = x - size * 0.5,yf = y - size * 0.5,d = Math.sqrt(xf * xf + yf * yf),h = 0.25 + 30 * Math.random() / d,w = 0.7;if (d < size * 0.5) createCube(xf, h * 0.5, yf, w, h, w);}}webgl.attributes.aVertexPosition.load(vertices, 3);webgl.attributes.aVertexNormal.load(normals, 3);// set lightningwebgl.uniforms.uAmbientColor.set(0,0,0);webgl.uniforms.uPointLightingLocation.set(0, -1, -10);webgl.uniforms.uPointLightingSpecularColor.set(1,0.55,0.15);webgl.uniforms.uPointLightingDiffuseColor.set(0,0.25,0.5);run();} ();
</script></body>
</html>

HTML3D立体城市特效代码相关推荐

HTML做3D立体特效,html5 3D立体粒子波浪动画特效代码
特效描述:html5 3D立体粒子波浪动画.3D 粒子动画特效代码结构 1. 引入JS 2. HTML代码 /// Scene const sceneSettings = { width: () ...
18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码原生JS鼠标悬停文字球状放大显示效果代码原生js文字动画圆形 ...
jquery环形3D立体旋转特效
jquery环形3D立体旋转特效作者/代码整理:站长素材 (转载请附加本文地址,带有"懒人原生"字样的谢绝转载)发布日期:2013-07-20 立体效果比较强的jquery特效 ...
HTML特效代码大全(史上最全)
1.贴图:<img src="图片地址"> 2.加入连接:<a href="所要连接的相关地址">写上你想写的字</a> 3 ...
HTML特效代码汇总
1.贴图:<img src="图片地址"> 2.加入连接:<a href="所要连接的相关地址">写上你想写的字</a> 3 ...
CSS 3.0实现立体书本特效
给大家分享一个运用CSS 3.0实现的立体书本特效,效果如下: 还真是很像一本书吧,但是需要下面三张图片配合. 1.书的正面图(1.jpg),实际尺寸以代码中的为准. 2.书的侧面(2.jpg),实际 ...
HTML特效代码大全【有备无患】
1)贴图:<img src="图片地址"> 2)加入连接:<a href="所要连接的相关地址">写上你想写的字</a> 3 ...
CSS实现3D立体动态相册代码!
1.效果展示你们喜欢玩的3D立体动态相册都在这里了,有手就行哦. 2.创建好路径创建好一个文件夹,css目录下面创建好css文件,img目录下放好需要展示的图片,创建好html文件,具体如图所示: ...
html页面特效代码大全
1)贴图:<img src="图片地址"> 2)加入连接:<a href="所要连接的相关地址">写上你想写的字</a>3) ...

HTML3D立体城市特效代码

HTML3D立体城市特效代码相关推荐

最新文章

热门文章