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