threejs搭建一个三维城市建筑物模型俯视交互效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：threejs搭建一个三维城市建筑物模型俯视交互效果代码

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

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

<head>

    <meta charset="UTF-8">




    <style>
        body{margin: 0px; background-color: #bbbbbb; overflow: hidden;}
    </style>


</head>

<body>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.58.js"></script>


    <script>
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        
        
        
        var updateFcts = [];
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 3000);
        camera.position.z = 200;
        
        
        
        window.addEventListener("resize", function () {
          let width = window.innerWidth;
          let height = window.innerHeight;
          renderer.setSize(width, height);
          camera.aspect = width / height;
          camera.updateProjectionMatrix();
        });
        
        
        //////////////////////////////////////////////////////////////////////////////////
        //		comment								//
        //////////////////////////////////////////////////////////////////////////////////
        // from @mrdoob http://www.mrdoob.com/lab/javascript/webgl/city/01/
        
        var THREEx = THREEx || {};
        
        THREEx.ProceduralCity = function () {
          // build the base geometry for each building
          var geometry = new THREE.CubeGeometry(1, 1, 1);
          // translate the geometry to place the pivot point at the bottom instead of the center
          geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0.5, 0));
          // get rid of the bottom face - it is never seen
          geometry.faces.splice(3, 1);
          geometry.faceVertexUvs[0].splice(3, 1);
          // change UVs for the top face
          // - it is the roof so it wont use the same texture as the side of the building
          // - set the UVs to the single coordinate 0,0. so the roof will be the same color
          //   as a floor row.
          geometry.faceVertexUvs[0][2][0].set(0, 0);
          geometry.faceVertexUvs[0][2][1].set(0, 0);
          geometry.faceVertexUvs[0][2][2].set(0, 0);
          geometry.faceVertexUvs[0][2][3].set(0, 0);
          // buildMesh
          var buildingMesh = new THREE.Mesh(geometry);
        
          // base colors for vertexColors. light is for vertices at the top, shaddow is for the ones at the bottom
          var light = new THREE.Color(0xffffff);
          var shadow = new THREE.Color(0x303050);
        
          var cityGeometry = new THREE.Geometry();
          for (var i = 0; i < 20000; i++) {
            // put a random position
            buildingMesh.position.x = Math.floor(Math.random() * 200 - 100) * 10;
            buildingMesh.position.z = Math.floor(Math.random() * 200 - 100) * 10;
            // put a random rotation
            buildingMesh.rotation.y = Math.random() * Math.PI * 2;
            // put a random scale
            buildingMesh.scale.x = Math.random() * Math.random() * Math.random() * Math.random() * 50 + 10;
            buildingMesh.scale.y = Math.random() * Math.random() * Math.random() * buildingMesh.scale.x * 8 + 8;
            buildingMesh.scale.z = buildingMesh.scale.x;
        
            // establish the base color for the buildingMesh
            var value = 1 - Math.random() * Math.random();
            var baseColor = new THREE.Color().setRGB(value + Math.random() * 0.1, value, value + Math.random() * 0.1);
            // set topColor/bottom vertexColors as adjustement of baseColor
            var topColor = baseColor.clone().multiply(light);
            var bottomColor = baseColor.clone().multiply(shadow);
            // set .vertexColors for each face
            var geometry = buildingMesh.geometry;
            for (var j = 0, jl = geometry.faces.length; j < jl; j++) {
              if (j === 2) {
                // set face.vertexColors on root face
                geometry.faces[j].vertexColors = [baseColor, baseColor, baseColor, baseColor];
              } else {
                // set face.vertexColors on sides faces
                geometry.faces[j].vertexColors = [topColor, bottomColor, bottomColor, topColor];
              }
            }
            // merge it with cityGeometry - very important for performance
            .........完整代码请登录后点击上方下载按钮下载查看