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

代码语言:html

所属分类:三维

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

代码标签: 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;
		.........完整代码请登录后点击上方下载按钮下载查看

网友评论0