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

网友评论0