webgl+canvas实现穿越建筑物体内部动画效果代码-html代码-BFW代码库

webgl+canvas实现穿越建筑物体内部动画效果代码

代码语言：html

所属分类：动画

代码描述：webgl+canvas实现穿越建筑物体内部动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
body,
html {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
	user-select: none;
}
canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	user-select: none;
	touch-action: none;
	content-zooming: none;
	background: #000;
}
</style>


</head>

<body>

    <canvas></canvas>

    <script id="vertexShader" type="x-shader/x-vertex">
        attribute vec2 aPosition;
        uniform vec2 uResolution;
        void main() {
        gl_Position = vec4(((aPosition / uResolution * 2.0) - 1.0) * vec2(1, -1), 0, 1);
        }
    </script>



    <script id="fragmentShader" type="x-shader/x-fragment">
        precision highp float;
        uniform vec2 uResolution;
        uniform vec3 ue;
        uniform vec2 ucs;
        void main() {
        const float Z = 3.0;
        const float IZ = 1.0 / Z;
        vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution.xy) / min(uResolution.y, uResolution.x);
        float cn = ucs.x;
        float sn = ucs.y;
        float rx = uv.x;
        float ry = uv.y;
        float rz = 0.4;
        float d = 1.0;
        float ex = ue.x;
        float ey = ue.y;
        float ez = ue.z;
        float tx = ex;
        float ty = ey;
        float tz = ez;
        float gx = cn * rx + sn * rz;
        float gy = ry;
        float gz = cn * rz - sn * rx;
        rx = gx;
        ry = gz;
        rz = gy;
        gx = cn * rx + sn * rz;
        gy = ry;
        gz = cn * rz - sn * rx;
     .........完整代码请登录后点击上方下载按钮下载查看