threejs实现一个太阳下的三维城市景色代码

代码语言:html

所属分类:三维

代码描述:threejs实现一个太阳下的三维城市景色代码,键盘上下键控制镜头上下移动,w和s键控制镜头向前或向后运动,a键旋转镜头。

代码标签: threejs 三维 城市 景色 太阳

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

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  margin:0;
  overflow:hidden;
}

.info {
  opacity:0;
  width:200px;
  height:200px;
  position:absolute;
  top:46vh;
  left:2vw;
  line-height:30px;
  display:flex;
  color:#f0f0ee;
  font-size:1.1em;
  transition:.5s ease;
}

span {
  font-size:1.3em;
  font-weight:bold;
  color:red;
}

.icon {
  width:30px;
  height:30px;
  display:block;
  background-color:white;
  position:absolute;
  background-image:url('//repo.bfw.wiki/bfwrepo/icon/5d834d3c11de0.png');
  background-size:30px 30px;
  padding-right:2px;
  background-repeat:norepeat;
}

.icon:hover + .info {
  opacity:1;
}
</style>

</head>

<body>
  <div class="icon"></div>
<div class="info"><p><span>Camera Controls:</span><br> A: Look Left <br>D: Look Right<br> W: Z forwards <br>S: Z backwards<br> Left Arrow: X left <br>Right Arrow: X right <br>Up Arrow: Y up <br>Down Arrow: Y down</p></div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.92.js"></script>
      <script >
var .........完整代码请登录后点击上方下载按钮下载查看

网友评论0