threejs实现一个夜幕下三维城市街道道路景色代码-html代码-BFW代码库

threejs实现一个夜幕下三维城市街道道路景色代码

代码语言：html

所属分类：三维

代码描述：threejs实现一个夜幕下三维城市街道道路景色代码，键盘上下左右键控制镜头前进后退左转右转。

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

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  font-family: arial;
  margin: 0;
  padding: 0;
}

#directions {
  position: absolute;
  color: white;
  margin: 10px;
}
#directions span {
  margin-right: 25px;
}
</style>



</head>

<body>
  <div id="directions">
  <span>Up - move forwards</span>
  
  <span>Down - move backwards</span>
  
  <span>Right - rotate right</span>
  
  <span>Left - rotate left</span>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script>
      <script>
"use strict";
const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight - 10;
let cameraStart = 8000;
const renderer = new THREE.WebGLRenderer({
    antialias: true,
    aplpha: false
});
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor('purple', .5);
const scene = new THREE.Scene();
const color = ['#8DA1B9', '#95ADB6', '#CBB3BF', '#DBC7BE', '#EF959C'];
const cubes = [];
init();
function init() {
    createStreet();
    createStreetSide(250);
    createStreetSide(-250);
}
// get a random color
function randomColor() {
    return color[Math.floor(Math.random() * color.length)];
}
// set a random position
function randomPos() {
    return {
        x: Math.random() * WIDTH,
        y: Math.random() * HEIGHT,
        z: Math.random() * 1000
    };
}
function createStreet() {
    var street = createCube(WIDTH, 1, 10000, 'lightgray');
    street.position.setZ(3200);
    scene.add(street);
}
function createStreetSide(x) {
    let cube;
    let z = 0;
    for (let i = 0; i < 200; i++) {
        cube = createCube(100, Math.random.........完整代码请登录后点击上方下载按钮下载查看