LUME.unversioned三维镜头旋转效果代码

代码语言:html

所属分类:三维

代码描述:LUME.unversioned三维镜头旋转效果代码

代码标签: 旋转 效果

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


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

<head>

  <meta charset="UTF-8">
  

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

lume-scene {
	touch-action: none;
}
</style>



</head>

<body >
  <!--
Made with LUME
http://github.com/lume/lume
(Working towards an initial release!)
-->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/LUME.unversioned.7.js"></script>

<!--
ABOUT:
This demo show how to make a camera rig for rotating a camera around an object.
-->

<lume-scene id="scene" perspective="800" webgl enable-css="false">
	<!-- Camera Rig -->
	<lume-node id="controls" size="1 1 1" rotation="0 30 0" size-mode="proportional proportional proportional">
		<lume-node id="xRotator" size="1 1 1" rotation="40 0 0" size-mode="proportional proportional proportional">
			<lume-perspective-camera id="cam" active position="0 0 1000" align="0.5 0.5 0.5"></lume-perspective-camera>
		</lume-node>
	</lume-node>

	<lume-node id="lights" align="0.5 0.5 0.5" rotation="0 30 0">
		<lume-point-light color="yellow" position="500 0 0" intensity="0.7">
			<lume-sphere has="basic-material" color="yellow" opacity="0.5" mount-point="0.5 0.5 0.5" size="10 10 10" cast-shadow="false" receive-shadow="false"></lume-sphere>
		</lume-point-light>

		<lume-point-light color="deeppink" position="-500 0 0" intensity="0.7">
			<lume-sphere has="basic-material" color="deeppink" opacity="0.5" mount-point="0.5 0.5 0.5" size="10 10 10" cast-shadow="false" receive-shadow="false"></lume-sphere>
		</lume-point-light>

		<lume-point-light color="cyan" position="0 0 500" intensity="0.7">
			<lume-sphere has="basic-material" color="cyan" opacity="0.5" mount-point="0.5 0.5 0.5" size="10 10 10" cast-shadow="false" receive-shadow="false"></lume-sphere>
		</lume-point-light>

		<lume-point-light color="limegreen" position="0 0 -500" intensity="0.7">
			<lume-sphere has="basic-material" color="limegreen" opacity="0.5" mount-point="0.5 0.5 0.5" size="10 10 10" cast-shadow="false" receive-shadow="false"></lume-sphere>
		</lume-point-light>

		<lume-point-light color="white" position="0 -500 0" intensity="0.7">
			<lume-sphere has="basic-material" color="white" opacity=&quo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0