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

代码语言：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 < 40; i++) {
    var bldngH = Math.random() * (maxHeight - minHeight) + minHeight;
    var bldngW = Math.random() * (maxWidth - minWidth) + minWidth;
    var bldngZ = Math.random() * (0.75 - 0.25) + 0.25;

    var geometry = new THREE.BoxGeometry(bldngW, bldngH, bldngZ);

    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(xStart, bldngH / 2, zStart);
    mesh.castShadow = true;
    mesh.recieveShadow = true;

    scene.add(mesh);

    xStart = Math.random() * (10 - -10) + -10;
    zStart = Math.random() * (5 - -5) + -5;
  }
}

function makeTrees() {
  //tree trunk
  var treeTrunkGeo = new THREE.CylinderGeometry(0.025, 0.025, 0.15, 32);
  var trunkMaterial = new THREE.MeshStandardMaterial({
    color: 0x8a5204 });


  var topRadMin = 0.15,
  topRadMax = 0.2,
  topHeightMin = 0.5,
  topHeightMax = 0.75;

  //generate trees
  for (i = 0; i < 350; i++) {
    var currRad = Math.random() * (topRadMax - topRadMin) - topRadMin;
    var currHeight =
    Math.random() * (topHeightMax - topHeightMin) - topHeightMin;

    var treeTopGeo = new THREE.ConeGeometry(currRad * -1, currHeight * -1, 32);
    var topMaterial = new THREE.MeshStandardMaterial({
      color: 0x048a0f });


    var treeTop = new THREE.Mesh(treeTopGeo, topMaterial);
    treeTop.position.set(0, 0.2, -5);
    tr.........完整代码请登录后点击上方下载按钮下载查看