three实现可调节参数的三维城市废墟穿梭动画效果代码-html代码-BFW代码库

three实现可调节参数的三维城市废墟穿梭动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现可调节参数的三维城市废墟穿梭动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    body {
	margin: 0;
	overflow: hidden;
}
</style>

</head>

<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.0.99.0..js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script >
        
        console.clear();
window.addEventListener("DOMContentLoaded",app);

function app() {
	var scene,
		camera,
		renderer,
		controls,
		GUI,

		textureLoader = new THREE.TextureLoader(),
		asphaltTexture,
		bldgTexture,
		bldgs = [],
		debris = [],
		debrisIdealSet = [],
		ambientLight,
		hemiLight,

		// user adjustable
		brightness = 0.5,
		fogDistance = 720,
		speed = 0.5,

		// should stay as is
		bldgColor = 0x242424,
		lightColor = 0x444444,
		skyColor = 0xaaaaaa,
		chunkSize = 128,
		chunksAtATime = 6,
		debrisPerChunk = 32,
		debrisMaxChunkAscend = 2,
		smBldgSize = 10,
		lgBldgSize = 12;

	class Building {
		constructor(x,y,z,width,height,depth,rotX = 0,rotY = 0,rotZ = 0) {
			this.geo = new THREE.CubeGeometry(width,height,depth);
			this.mat = new THREE.MeshLambertMaterial({
				color: bldgColor,
				map: bldgTexture
			});
			
			this.mat.map.wrapS = THREE.RepeatWrapping;
			this.mat.map.wrapT = THREE.RepeatWrapping;
			this.mat.map.repeat.set(1,height/width > 2 ? 3 : 2);
			
			let halfHeight = height/2,
				isRotated = rotX != 0 || rotY != 0 || rotZ != 0;

			this.mesh = new THREE.Mesh(this.geo, this.mat);
			this.mesh.position.set(x,isRotated ? y : y + halfHeight,z);

			if (isRotated) {
				this.geo.translate(0,halfHeight,0);
				this.mesh.rotation.x = rotX * Math.PI/180;
				this.mesh.rotation.y = rotY * Math.PI/180;
				this.mesh.rotation.z = rotZ * Math.PI/180;
			}
			this.mesh.castShadow = true;
			scene.add(this.mesh);
		}
	}
	class Debris {
		constructor(x,y,z,width,height,depth,rotX = 0,rotY = 0,rotZ = 0) {
			this.geo = new THREE.CubeGeometry(width,height,depth);
			this.mat = new THREE.MeshLambertMaterial({
				color: bldgColor
			});
			this.mesh = new THREE.Mesh(this.geo, this.mat);
			this.mesh.position.set(x,y,z);
			this.mesh.rotation.set(
				rotX * Math.PI/180,
				rotY * Math.PI/180,
				rotZ * Math.PI/180
			);
			scene.add(this.mesh);
		}
	}
	const randomInt = (min,max) => {
			return Math.floor(Math.random() * (max - min)) + min;
		},
		randomAngle = () => {
			return Math.floor(Math.random() * 360);
		}

	var init = () => {
			// load textures
			asphaltTexture = textureLoader.load("https://i.ibb.co/hVK82BH/asphalt-texture.jpg");
			bldgTexture = textureLoader.load("https://i.ibb.co/ZGLhtGv/building-texture.jpg");

			// setup scene
			scene = new THREE.Scene();
			camera = new TH.........完整代码请登录后点击上方下载按钮下载查看