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