LUME实现一个三维3d效果示例代码-html代码-BFW代码库

LUME实现一个三维3d效果示例代码

代码语言：html

所属分类：三维

代码描述：LUME实现一个三维3d效果示例代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
html,
body {
	background: #222;
	width: 100%;
	height: 100%;
	margin: 0;
}

lume-scene {
	/* Prevent touch scrolling from interfering with out pointermove handler. */
	touch-action: none;
}

img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* background: black; */
}

lume-dom-plane {
	background: rgba(0, 0, 0, 0.3);
	border: 2px solid deeppink;
}

div {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	color: white;
	font-size: 6.7vw;
	font-family: sans-serif;
	font-weight: bold;
	outline: none;
}
</style>


</head>

<body translate="no" >
  <!--
Made with LUME.
http://github.com/lume/lume
-->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/LUME.js"></script>
<!-- Utility to fit text to a container's width. -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/fitty.js"></script>

<!-- By default a <lume-scene> fills the space of it's parent, in this case the <body>. -->
<lume-scene id="scene" experimental-webgl touch-action="none">

	<lume-sphere id="world" texture="//repo.bfw.wiki/bfwrepo/image/5ff25fc70cfb7.png" size="120 120 120" mount-point="0.5 0.5 -0.2" color="white">
		<lume-node align="0.5 0.5" rotation="0 35 35">
			<lume-node align="0.5 0.5" id="moon">
				<lume-sphere texture="//repo.bfw.wiki/bfwrepo/image/5e7e82c3555ec.png" size="20 20 20" mount-point="0.5 0.5 0.5" position="150" color="white"></lume-sphere>
			</lume-node>
		</lume-node>
	</lume-sphere>

	<!-- Add some light to the scene! -->
	<lume-point-light id="light" size="0 0" position="0 0 600" color="wh.........完整代码请登录后点击上方下载按钮下载查看