gl-matrix+webgl实现可调参数的三维物体运行动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：gl-matrix+webgl实现可调参数的三维物体运行动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Space+Mono&display=swap");

body,
html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #000;
        font-family: "Space Mono", monospace;
        font-size: 1rem;
}
canvas {
        width: 100%;
        height: 100%;
}
#ui {
        position: absolute;
        top: 10px;
        left: 10px;
        color: white;
        background: rgba(0, 0, 0, 0.7);
        padding: 10px;
        border-radius: 5px;
        max-width: 460px;
}
.control {
        margin-bottom: 10px;
}
label {
        display: inline-block;
        width: 120px;
}
input[type="range"] {
        width: 260px;
}
input[type="color"] {
        vertical-align: middle;
}
#togglePanel {
        cursor: pointer;
        user-select: none;
        font-size: 20px;
        margin-bottom: 0;
}
.colorBtn {
        margin-left: 5px;
        cursor: pointer;
        font-family: "Space Mono", monospace;
        font-size: 1rem;
}
button,
input {
        font-family: "Space Mono", monospace;
        font-size: 1rem;
}
.sliderValue {
        display: inline-block;
        width: 40px;
        text-align: right;
        margin-left: 5px;
}
#fullscreenBtn {
        margin-top: 10px;
        width: 100%;
        padding: 5px 10px;
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
}
</style>


  
</head>

<body translate="no">
  <canvas id="glCanvas"></canvas>

<div id="ui">
        <div id="togglePanel">☰</div>
        <div id="controls">
                <div class="control">
                        <label for="zoomLevel">Zoom:</label>
                        <input type="range" id="zoomLevel" min="0.1" max="3" step="0.1" value="1">
                        <span id="zoomValue" class="sliderValue">1.00</span>
                </div>
                <div class="control">
                        <label for="rotationSpeed">Rotation:</label>
                        <input type="range" id="rotationSpeed" min="0" max="3" step="0.01" value="0.3">
                        <span id="rotationValue" class="sliderValue">0.30</span>
                </div>
                <div class="control">
                        <label for="waveSpeed">Wave:</label>
                        <input type="range" id="waveSpeed" min="0" max="2" step="0.01" value="0.1">
                        <span id="waveValue" class="sliderValue">0.10</span>
                </div>
                <div class="control">
                        <label for="cubeColor">Cube Color:</label>
                        <input type="color" id="cubeColor" value="#b8934a">
                        <button class="colorBtn" id="cubeRandom">Random</button>
                        <button class="colorBtn" id="cubeRainbow">Rainbow</button>
                </div>
                <div class="control">
                        <label for="orbColor">Orb Color:</label>
                        <input type="color" id="orbColor" value="#ffffff">
                        <button class="colorBtn" id="orbRandom">Random</button>
                        <button class="colorBtn" id="orbRainbow">Rainbow</button>
                </div>
                <div class="control">
                        <label for="sphereColor">Sphere Col.:</label>
                        <input type="color" id="sphereColor" value="#C0C0C0">
                        <button class="colorBtn" id="sphereRandom">Random</button>
                        <button class="colorBtn" id="sphereRainbow">Rainbow</button>
                </div>
                <div class="control">
                        <label for="skyColor">Sky Color:</label>
                        <input type="color" id="skyColor" value="#87CEEB">
                </div>
                <div class="control">
                        <label for="floorColor">Floor Color:</label>
                        <input type="color" id="floorColor" value="#aaaaaa">
                </div>
                <button id="fullscreenBtn">Toggle Full Screen</button>
        </div>
</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gl-matrix-min.js"></script>
  
      <script  >
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl2");

if (!gl) {
  console.error("WebGL 2 not supported");
  document.body.innerHTML = "WebGL 2 is not supported in your browser.";
}

const vertexShaderSource = `#version 300 es
in vec4 a_position;
void main() {
  gl_Position = a_position;
}`;

const fragmentShaderSource = `#version 300 es
precision highp float;
out vec4 fragColor;

uniform vec3 iResolution;
uniform float iTime;
uniform vec4 iMouse;
uniform float uZoomLevel;
uniform float uRotationSpeed;
uniform float uWaveSpeed;
uniform vec3 uCubeColor;
uniform vec3 uOrbColor;
uniform vec3 uSphereColor;
uniform vec3 uSkyColor;
uniform vec3 uFloorColor;
uniform bool uCubeRainbow;
uniform bool uOrbRainbow;
uniform bool uSphereRainbow;

vec3 hsv2rgb(vec3 c) {
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}

vec2 rotate(vec2 a, float b) {
    float c = cos(b);
    float s = sin(b);
    return vec2(
        a.x * c - a.y * s,
        a.x * s + a.y * c
    );
}

float sdBox( vec3 p, vec3 b ) {
    vec3 d = abs(p) - b;
    return min(max(d.x,max(d.y,d.z)),0.0) + length(max(d,0.0));
}

float scene(vec3 p) {
    vec3 sp = p + vec3(1,3,2);

    return min(
        max(
            max(
                sdBox(p, vec3(1.)),
                -sdBox(p,vec3(.9))
            ),
            abs(mod(length(sp)-iTime*uWaveSpeed,.2)-.1)-.01
        ),
        min(
            length(p)-.8,
            length(p - vec3(2.0 * sin(iT.........完整代码请登录后点击上方下载按钮下载查看