vue+lume实现逼真三维光线跟踪照射按钮阴影效果代码-html代码-BFW代码库

vue+lume实现逼真三维光线跟踪照射按钮阴影效果代码

代码语言：html

所属分类：三维

代码描述：vue+lume实现逼真三维光线跟踪照射按钮阴影效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  

  
</head>

<body>
  <!--
Made with LUME.
http://lume.io
-->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lume.global.0.3.0.js"></script>

<!-- Lume works with any framework. Here's we'll try out Vue because
  it works with plain HTML, not requiring any build tool. -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.7.14.js"></script>

<!-- Tween.js is for smoothly animating numbers. We'll animate our buttons up and down. -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Tween.16.7.0.js"></script>

<!-- Pointer Events polyfill (needed in Safari < 13) -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pep.js"></script>

<script>
        LUME.defineElements()
</script>

<style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
        body,
        html {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden;
                touch-action: none;
                background: black;
        }
        lume-element3d {
                text-align: center;
        }
        button {
                width: 100%;
                height: 100%;
                white-space: nowrap;
                border-radius: 10px;
                border: none;
                background: #595c5e;
                color: #ccc;
                outline: none;
                font-family: 'Poppins', sans-serif;
                font-weight: bold;
                font-size: 16px;
        }
        button:focus,
        button:hover {
                background: #617e9f;
        }
</style>

<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"
                touch-action="none"
                @pointermove="onmove"
                @pointerdown="ondown"
                @pointerup="onup"
        >
                <lume-ambient-light color="#ffffff" intensity="0.5"></lume-ambient-light>
                <lume-plane ref="plane" id="bg&.........完整代码请登录后点击上方下载按钮下载查看