HTML3D立体城市特效代码

article/2025/8/20 17:08:42

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>


http://chatgpt.dhexx.cn/article/RVJKStLI.shtml

相关文章

HTML-特效代码大全

HTML-特效代码大全

HTML特效代码大全&#xff08;一部分## 标题&#xff09; HTML特效代码 1。忽视右键 　 <body οncοntextmenu“return false”> 　 或 　 2。加入背景音乐 　 IE: 　 NS: 　 　 .mid你的背景音乐的midi格式文件 3。简单的window.open方法 　 <a href"#"…
阅读更多...
html语言闪烁特效代码,css3 文字闪烁特效代码

html语言闪烁特效代码,css3 文字闪烁特效代码

今天给大家分享几个文字闪烁特效代码，纯css3代码实现，对于新手小伙伴值得拿来学习一下。 文字闪烁特效一 通过改变透明度来实现文字的渐变闪烁，代码如下： 文字闪烁：闪烁效果 .main{color: #666;margin-top: 50px; } /* 定义keyframe动画，命名为blink */ @keyframes blink…
阅读更多...
html canvas 烟花 特效代码

html canvas 烟花 特效代码

代码如下&#xff1a; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head><title> 真实烟花</title><style>body {padding: 0;}canvas {display: block;}</style> </head><body>…
阅读更多...
html星空代码在线,怎么操作html星空特效代码

html星空代码在线,怎么操作html星空特效代码

html不是一种编程语言&#xff0c;而是一种标记语言 &#xff0c;是网页制作所必备的。这些代码式的专业语言我们在普通的工作中运用的非常少&#xff0c;它的通用性可以把存放在一台电脑中的文本或图形与存放在另一台电脑中的文本或图形方便地联系在一起&#xff0c;形成有机的…
阅读更多...
HTML龙卷风特效代码

HTML龙卷风特效代码

今天&#xff0c;我给大家带来了短视频平台上超火的HTML龙卷风特效代码&#xff0c;如下&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>粒子漩涡特效</title> <style> html,body{ margin:0px…
阅读更多...
html爱心特效代码教程

html爱心特效代码教程

一、图片展示 二、使用教程 1.桌面新建文本文档 2.将以下代码放入 3.将后缀改为.html 三、代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME&…
阅读更多...
html爱心特效代码

html爱心特效代码

New Document /* * RequestAnimationFrame polyfill by Erik Mller */ (function(){var b0;var c[“ms”,“moz”,“webkit”,“o”];for(var a0;a<c.length&&!window.requestAnimationFrame;a){window.requestAnimationFramewindow[c[a]“RequestAnimationFrame”…
阅读更多...
html简单特效代码,html特效代码大全

html简单特效代码,html特效代码大全

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 23. 永远都会带着框架 if (window top)top.location.href "frames.htm"; //frames.htm为框架网页 // --> 24. 防止被人frame if (top.location ! self.location)top.locationself.location; // --> 25. 网页将不…
阅读更多...
Android 科大讯飞 语音听写

Android 科大讯飞 语音听写

这几天在搞一个语音识别的项目 用到i的是科大讯飞的语音服务&#xff0c;第一次搞语音识别&#xff0c;在这里记录一下&#xff0c;也希望对大家有用。废话不多说进入正题 一、要用到科大讯飞的语音识别功能&#xff0c;肯定是要他的开发者平台申请账号&#xff0c;创建应用&a…
阅读更多...
Python调用科大讯飞语音听写的SDK包

Python调用科大讯飞语音听写的SDK包

一、如何下载科大讯飞语音听写的SDK包 1.1、注册下载语音听写SDK包 **第一步&#xff1a;**登录讯飞开放平台&#xff0c;找到产品服务——“语音听写”&#xff0c;点击“立即开通” **第二步&#xff1a;**创建新应用 **第三步&#xff1a;**创建应用&#xff0c;填写信息…
阅读更多...
C# 实现语音听写

C# 实现语音听写

本文系原创&#xff0c;禁止转载。 分享如何使用c#对接科大讯飞语音听写服务&#xff0c;简单高效地实现语音听写。 实现语音听写主要分为录音和语音识别两部分&#xff1b;录音是指获取设备声卡端口的音频数据并将之保存为音频文件&#xff0c;语音识别就是将刚才所述的音频文…
阅读更多...
讯飞语音听写

讯飞语音听写

第一步&#xff1a;将下载好的Sdk解压&#xff0c;将压缩文件中的libs下的jar文件放到项目中的libs包下&#xff0c;将压缩文件中的lisb下除jar文件放到main下的jniLibs包中 第二步&#xff1a;Sdk初始化,建议选择在自定义的application中初始化。 //初始化讯飞语音SpeechUtil…
阅读更多...
讯飞语音——带你简单实现语音听写

讯飞语音——带你简单实现语音听写

语音听写 de 简单实现 一、前言 如果你没有在讯飞语音平台上创建应用&#xff0c;请先参考讯飞语音的详细配置使用 二、功能描述 语音听写和语音合成都是较为基础也是最常使用的两个基本功能。 语音合成是将文本转化为语音说出来&#xff0c;就是读文章。 语音听写是什么呢&a…
阅读更多...
使用讯飞实现语音听写与语音合成功能

使用讯飞实现语音听写与语音合成功能

一、准备工作 1、首先你需要去科大讯飞的官网去注册一个账号&#xff0c;怎么注册我就不说了&#xff0c;然后去控制台&#xff0c;创建新应用。 2、下载对应的sdk&#xff0c;点击sdk下载&#xff0c;记住这里的APPID码&#xff0c;sdk初始化要用。 3、下载语音听写和在线语…
阅读更多...
科大讯飞语音听写在vue2中的使用

科大讯飞语音听写在vue2中的使用

安装 worker-loader版本是2.0.0 vue.config.js的配置如下chainWebpack:(config)=>{config.output.globalObject("this"); }, configureWebpack: (config) => {config.module.rules.push({test: /\.worker.js$/,use: {loader: "worker-loader",option…
阅读更多...
vue+科大讯飞语音听写功能(解决针对vue new Worker报错问题)

vue+科大讯飞语音听写功能(解决针对vue new Worker报错问题)

参考1&#xff1a;vue科大讯飞语音听写功能(解决针对vue new Worker报错问题)_Other world的博客-CSDN博客 参考2&#xff1a;vue中使用web worker - Gerryli - 博客园 参考3&#xff1a;将PC浏览器、ZOOM等软件正在播放的音频实时转成文字&#xff01;讯飞语音输入法的妙用 -…
阅读更多...
Unity2021接入讯飞语音听写（Android）

Unity2021接入讯飞语音听写（Android）

使用的引擎工具&#xff1a; Unity2021.3.19 android-studio-2021.1.21 第一步&#xff1a; 新建一个Android项目&#xff08;工程名字随便啦&#xff09; 然后新建一个library &#xff08;同上&#xff0c;库名自己命名吧&#xff09; Android环境目前就算是初步建立好了。 …
阅读更多...
vue2中接入讯飞语音听写

vue2中接入讯飞语音听写

首先先登录https://www.xfyun.cn/&#xff0c;在控制台中创建自己的app&#xff0c;并且拿到APPID。 下载crypto-js 与线程worker npm install crypto-js npm install worker-loader 官网中有示例文件&#xff0c;稍微改造一下&#xff0c;封装成组件就能使用了。 transco…
阅读更多...
Java 接入讯飞语音听写Speech to Text(STT)功能

Java 接入讯飞语音听写Speech to Text(STT)功能

标题 讯飞认证配置封装监听器客户端工具 Speech2TextClient.java 对外开放接口对外开放接口实现结果参考 根据官方提供的 WebIATWS 工具扩展修改&#xff0c;接入了讯飞的语音听写(STT)服务 讯飞认证配置 public class XFAuthorityConfig {public static final String hostUr…
阅读更多...
html5语音听写流式,iOS 讯飞语音听写(流式版)

html5语音听写流式,iOS 讯飞语音听写(流式版)

最近项目中用到了讯飞的语音识别,然后稍微看了一下,里面有几个值得注意的点,记录一下,先说语音听写(流式版),实时语音转写后期会附上 ,文末有 demo //语音听写(流式版) 语音听写流式版其实没设么好说的,因为直接有 SDK,导入项目就可以了,需要注意的点就是每个创建的 APP 和 SDK…
阅读更多...
推荐文章

Copyright @ 2022~2023