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

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 WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;

var cameraXStart = 0,
cameraYStart = 0.5,
cameraZStart = 25;

var renderer = new THREE.WebGLRenderer({
  antialias: true,
  aplpha: false });

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(WIDTH, HEIGHT);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setClearColor(0xcce0ff, 0.5);
renderer.gammaInput = true;
renderer.gammaOutput = true;

var scene = new THREE.Scene();
scene.background = new THREE.Color(0xcce0ff);

init();

function init() {
  makeGround();
  makeBuildings();
  makeTrees();
  makeRoads();
}

function makeGround() {
  var groundGeo = new THREE.PlaneGeometry(1000, 52);
  var groundMat = new THREE.MeshPhongMaterial({
    color: 0xffffff });

  groundMat.color.setHSL(0.095, 1, 0.75);

  var ground = new THREE.Mesh(groundGeo, groundMat);
  ground.rotation.x = -Math.PI / 2;
  ground.position.y = 0;

  scene.add(ground);
  ground.receiveShadow = true;
}

function makeBuildings() {
  var material = new THREE.MeshStandardMaterial({
    color: 0x4080ff,
    metalness: 0.75 });


  //building size variables
  var xStart = 0,
  zStart = 0,
  minHeight = 0.25,
  maxHeight = 2.75,
  minWidth = 0.5,
  maxWidth = 2;

  //generate buildings
  for (i = 0; i &.........完整代码请登录后点击上方下载按钮下载查看