threejs实现一个太阳下的三维城市景色代码
代码语言:html
所属分类:三维
代码描述:threejs实现一个太阳下的三维城市景色代码,键盘上下键控制镜头上下移动,w和s键控制镜头向前或向后运动,a键旋转镜头。
下面为部分代码预览,完整代码请点击下载或在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