threejs打造三维孤独的蜡烛燃烧效果-html代码-BFW代码库

threejs打造三维孤独的蜡烛燃烧效果

代码语言：html

所属分类：三维

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> The Lonely Candle (Three.js)</title>
    <style>
        body {
            overflow: hidden;
            margin: 0;
        }

        #circle {
            position: absolute;
            text-align: center;
            width: 60px;
            height: 60px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            background: rgba(255, 165, 0, 0.5);
            font-size: 50px;
            font-family: Times New Roman;
            color: rgba(255, 165, 0, 1);
            cursor: pointer;
        }

        .noselect {
            -webkit-touch-callout: none;
            /* iOS Safari */
            -webkit-user-select: none;
            /* Safari */
            -khtml-user-select: none;
            /* Konqueror HTML */
            -moz-user-select: none;
            /* Firefox */
            -ms-user-select: none;
            /* Internet Explorer/Edge */
            user-select: none;
            /* Non-prefixed version, currently
  supported by Chrome and Opera */
        }


        /* unvisited link */

        a:link {
            color: orange;
        }


        /* visited link */

        a:visited {
            color: orange;
        }


        /* mouse over link */

        a:hover {
            color: orange;
        }


        /* selected link */

        a:active {
            color: orange;
        }
    </style>

</head>
<body translate="no">

    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>
    <script src="http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js"></script>
    <script>
        function getFlameMaterial(isFrontSide) {
            let side = isFrontSide ? THREE.FrontSide: THREE.BackSide;
            return new THREE.ShaderMaterial({
                uniforms: {
                    time: {
                        value: 0
                    }
                },
                vertexShader: `
                uniform float time;
                varying vec2 vUv;
                varying float hValue;

                //https://thebookofshaders.com/11/
                // 2D Random
                float random (in vec2 st) {
                return fract(sin(dot(st.xy,
                vec2(12.9898,78.233)))
                * 43758.5453123);
                }

                // 2D Noise based on Morgan McGuire @morgan3d
                // https://www.shadertoy.com/view/4dS3Wd
                float noise (in vec2 st) {
                vec2 i = floor(st);
                vec2 f = fract(st);

                // Four corners in 2D of a tile
                float a = random(i);
                float b = random(i + vec2(1.0, 0.0));
                float c = random(i + vec2(0.0, 1.0));
                float d = random(i + vec2(1.0, 1.0));

                // Smooth Interpolation

                // Cubic Hermine Curve.  Same as SmoothStep()
                vec2 u = f*f*(3.0-2.0*f);
                // u = smoothstep(0.,1.,f);

                // Mix 4 coorners percentages
                return mix(a, b, u.x) +
                (c - a)* u.y * (1.0 - u.x) +
                (d - b) * u.x * u.y;
                }

                void main() {
                vUv = uv;
                vec3 pos = position;

                pos *= vec3(0.8, 2, 0.725);
                hValue = position.y;
                //float sinT = sin(time * 2.) * 0.5 + 0.5;
                float posXZlen = length(position.xz);

                pos.y *= 1. + (cos((posXZlen + 0.25) * 3.1415926) * 0.25 + noise(vec2(0, time)) * 0.125 + noise(vec2(position.x + time, position.z + time)) * 0.5) * position.y; // flame height

                pos.x += noise(vec2(time * 2., (position.y - time) * 4.0)) * hValue * 0.0312; // flame trembling
                pos.z += noise(vec2((position.y - time) * 4.0, time * 2.)) * hValue * 0.0312; // flame trembling

                gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
                }
                `,
                fragmentShader: `
                varying float hValue;
                varying vec2 vUv;

                // honestly stolen from https://www.shadertoy.com/view/4dsSzr
                vec3 heatmapGradient(float t) {
                return clamp((pow(t, 1.5) * 0.8 + 0.2) * vec3(smoothstep(0.0, 0.3.........完整代码请登录后点击上方下载按钮下载查看