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