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;
                vary.........完整代码请登录后点击上方下载按钮下载查看