webgl+canvas生成三维线几何螺旋图形效果代码
代码语言:html
所属分类:三维
代码描述:webgl+canvas生成三维线几何螺旋图形效果代码
代码标签: webgl canvas 三维 线 几何 螺旋 图形
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow: hidden; } canvas { width: 100vw; height: 100vh; } </style> </head> <body > <script type="text/fragment" id="vertShader">#version 300 es in vec3 position; uniform mat4 u_viewMatrix; uniform mat4 u_modelMatrix; uniform mat4 u_modelViewMatrix; uniform mat4 u_projectionMatrix; uniform mat3 u_normalMatrix; out vec3 vNormal; out vec3 vPosition; out vec3 vWorldPosition; out vec2 vUV; void main() { vec4 camPos = u_projectionMatrix * u_modelViewMatrix * vec4(position, 1.0); gl_Position = camPos; vWorldPosition = (u_modelMatrix * vec4(0,0,0, 1.0)).xyz; vPosition = (u_modelMatrix * vec4(position, 1.0)).xyz; } </script> <script type="text/fragment" id="fragShader">#version 300 es precision highp float; in vec3 vNormal; in vec2 vUV; in vec4 camPos; in vec3 vPosition; in vec3 vWorldPosition; out vec4 colour; void main() { colour = vec4(1,1,1,1); } </script> <script type="module"> import { Obj, TransformFeedback, Renderer, Program, Mesh, Uniform, PointCloud, GeometryAttribute, Camera, Plane, Texture, Geometry, DollyCamera } from "https://cdn.skypack.dev/wtc-gl@1.0.0-beta.47"; import { Vec2, Vec3, Mat4 } from "https://cdn.skypack.dev/wtc-math@1.0.13"; console.clear(); const d = new Vec2(window.innerWidth, window.innerHeight); d.update = function () { uniforms.u_resolution.value = this.array; renderer.dimensions = this; camera.........完整代码请登录后点击上方下载按钮下载查看
网友评论0