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"
			size-mode="proportional proportional"
			size="1.3 1.3 0"
			align-point="0.5 0.5"
			mount-point="0.5 0.5"
			color="white"
			dithering
 			color="white"
			comment="free texture from https://polyhaven.com/a/concrete_layers_02"
			texture="//repo.bfw.wiki/bfwrepo/images/bg/concrete_layers_02_diff_2k.jpg"
			bump-map="h//repo.bfw.wiki/bfwrepo/images/bg/concrete_layers_02_disp_2k.jpg"
			bump-scale="8"
			shininess="100"
        >
			<lume-element3d
				id="button-container"
				position="0 0 20"
				size="520 38 0"
				align-point="0.5 0.5 0"
				mount-point="0.5 0.5 0"
			>
				<lume-mixed-plane
					v-for="(item, i) in buttons"
					ref="btn"
					:key="i"
					size-mode="literal proportional"
					size="120 1 0"
					:align-point="`${i*0.333} 0 0`"
					:mount-point="`${i*0.333} 0 0`"
					color="#444"
 					has="rounded-rectangle-geometry"
  					corner-radius="10"
  			.........完整代码请登录后点击上方下载按钮下载查看