lume vue实现按钮模拟三维空间光照阴影效果代码
代码语言:html
所属分类:三维
代码描述:lume vue实现按钮模拟三维空间光照阴影效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lume.global.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script> <!-- Tween.js is a lib for animating numbers based on "easing curves". --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tween.min.js"></script> <!-- pep.js provides the pointer events (pointermove, pointerdown, etc) --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pep.js"></script> <style> body, html { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: sans-serif; touch-action: none; } lume-node { text-align: center; } #bg { background: #62b997; } button { width: 100%; height: 100%; white-space: nowrap; border-radius: 0px; border: 1px solid #494455; background: #e96699; color: #494455; outline: none; } button:focus, button:hover { background: #eb4b89; color: #0a3359; border-color: #0a3359; } </style> </head> <body touch-action="none"> <template vue> <!-- Lights and shadows are powered by WebGL, but written with HTML: --> <lume-scene webgl="true" id="scene" background-color="black" background-opacity="0" perspective="800" shadowmap-type="pcfsoft" NOTE="one of basic, pcf, pcfsoft" > <lume-ambient-light color="#ffffff" intensity="0"></lume-ambient-light> <lume-dom-plane ref="plane" id="bg" size-mode="proportional proportional" size="1 1 0" color="#444"> <lume-node id="button-container" position="0 0 20" size="600 31 0" align-point="0.5 0.5 0" mount-point="0.5 0.5 0" > <lume-dom-plane v-for="n in [0,1,2,3,4]" ref="btn" :key="n" size-mode="literal proportional" size="100 1 0" :align-point="`${n*0.25} 0 0`" :mount-point="`${n*0.25} 0 0`" color="#444" > <button>button {{n+1}}</button> </lume-dom-plane> </lume-node> <lume-node id="lightContainer" size="0 0 0" position="0 0 300"> <lume-point-light id="light" color="white" size="0 0 0" cast-shadow="true" intensity="0.8" > <lume-mesh has="sphere-geometry basic-material" size="10 10 10" color="white" receive-shadow="false" cast-shadow="false" style="pointer-events: none" > </lume-mesh> </lume-point-light> </lume-node> </lume-dom-plane> </lume-scene> </template> <div id="buttonsRoot"></div> <script> LUME.useDefaultNames() new Vue({ el: '#buttonsRoot', template: document.........完整代码请登录后点击上方下载按钮下载查看
网友评论0