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

代码语言：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 THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
			renderer = new THREE.WebGLRenderer();
			renderer.setClearColor(new THREE.Color(skyColor));
			renderer.setSize(window.innerWidth, window.innerHeight);
			renderer.shadowMap.enabled = true;

			// use randomized and fixed configuration of debris particles that can be repeated
			for (var d = 0; d < debrisPerChunk; ++d) {
				let halfChunk = chunkSize/2,
					debrisParams = {
						x: randomInt(-halfChunk,halfChunk),
						y: randomInt(0,chunkSize * debrisMaxChunkAscend),
						z: randomInt(-halfChunk,halfChunk)
					};
					debrisParams.size = Math.abs(debrisParams.x / halfChunk) * 6;
					debrisParams.height = debrisParams.size * randomInt(2,3);

				debrisIdealSet.push({
					x: debrisParams.x,
					y: debrisParams.y,
					z: debrisParams.z,

					width: debrisParams.size,
					height: debrisParams.height,
					depth: debrisParams.size,

					rotX: randomAngle(),
					rotY: randomAngle(),
					rotZ: randomAngle()
				});
			}

			// generate city
			for (var cz = 1; cz > -chunksAtATime; --cz) {
					var zMove = chunkSize * cz;

					// surface
					var planeGeometry = new THREE.PlaneGeometry(chunkSize,chunkSize),
						planeMaterial = new THREE.MeshLambertMaterial({
							color: 0x969696,
							map: asphaltTexture
						});
			        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
					plane.rotation.x = -0.5 * Math.PI;
		.........完整代码请登录后点击上方下载按钮下载查看