使用Three.js實現3D樓盤展示，建立天空之盒實現真實的環境氛圍，在Three.js中新增樹，花等植物。 仿學校3D樓盤模型，結合物聯網實現安全監測

前言

這一篇帶大家認識，認識什麼是Three.js。Three.js 是一個能讓WebGL在瀏覽器執行且有3D效果的JS庫,也可以說是一個3D 引擎，你可以用它建立各種三維場景，包括了攝影機、光影、材質等各種物件
webgl是一項用來在網頁上繪製和渲染複雜三維圖形（3D圖形）,並允許使用者與之進行互動的技術。

整體實現效果

哈哈，是不是非常有點意思呢？給大家看看，我是怎麼仿出這樣子的，給大家看一眼原圖。

建立天空之盒

逼真多少，咱就不說了。首先這個氛圍咱得出來。天空！使用three.js建立一個天空之盒出來。把整個空間，當做一個立體的正方體，每一位面都由圖片進行填充，之後再進行渲染。也就是說，整個學校都在這個盒子內。

首先使用new THREE.Mesh 建立出來一個立體。THREE.BoxGeometry 就如英文描述一樣 箱式幾何形狀，三個引數為：10000。可想而知，這就是長、寬、高了。最後一個引數，就是紋理了。

  // 建立一個場景，將我們所有的元素，如物體，相機和燈光。
            scene = new THREE.Scene();
                //    建立天空之盒
            var skybox = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), material);
            scene.add(skybox);

建立天空之盒最重要的一步

 //天空之盒
        function createCubeMap() {
            //獲取立體位面圖資料夾
            var path = "../assets/textures/cubemap/parliament/";
            var format = '.png';   //影象字尾
            //生成影象地址陣列
            var urls = [
                path + 'px' + format, path + 'nx' + format,
                path + 'py' + format, path + 'ny' + format,
                path + 'pz' + format, path + 'nz' + format
            ];
           //將6個位面合併起來（載入紋理CUBE）
            var textureCube = THREE.ImageUtils.loadTextureCube(urls, new THREE.CubeReflectionMapping());
            return textureCube;
        }

類似於這種圖片似的

天空之盒

          //createCubeMap()  就是上面建立點陣圖的函數
           var textureCube = createCubeMap();
            textureCube.format = THREE.RGBFormat;

            var shader = THREE.ShaderLib["cube"];
            shader.uniforms["tCube"].value = textureCube;
            var material = new THREE.ShaderMaterial({
                fragmentShader: shader.fragmentShader,
                vertexShader: shader.vertexShader,
                uniforms: shader.uniforms,
                depthWrite: false,
                side: THREE.DoubleSide
            });
            //    建立天空之盒
            var skybox = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), material);
            scene.add(skybox);
            //  環境樣式
            envMaterial = new THREE.MeshBasicMaterial({ opacity: 0.5, transparent: true, envMap: textureCube, side: THREE.DoubleSide });
            // 把攝像機對準場景的中心
            camera.position.x = 0;
            camera.position.y = 400;
            camera.position.z = 2100;
            camera.lookAt(scene.position);

建立地平面

地平面的話，也就是，首先我們去找一張紋理圖，然後使用new THREE.BoxGeometry 建立一個地平面，引數如上所講是長寬高。接下來咱們就該生成紋理圖了， THREE.ImageUtils.loadTexture(「路勁」);地平面=形狀+紋理圖。最後設定地平面所處在，天空之盒中的位置，也就是說座標。

 function CreatePanl() {
            var floor_1 = THREE.ImageUtils.loadTexture("../image/plant/greenplane_2.jpg");
            floor_1.wrapS = THREE.RepeatWrapping;
            floor_1.wrapT = THREE.RepeatWrapping;
            floor_1.repeat.set(4, 4);
            var floor_1Material = new THREE.MeshLambertMaterial({ map: floor_1 });
            var planeGeometry = new THREE.BoxGeometry(5000, 1000, 1, 1);
            planeMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0xffffff, shininess: 200 });
            var plane = new THREE.Mesh(planeGeometry, floor_1Material);
            plane.receiveShadow = true;
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.x = 0;
            plane.position.y = 0;
            plane.position.z = 1200;
            scene.add(plane);
        }

地平面的紋理圖可以是這樣的！

其中：
（1）plane.receiveShadow ：是否接受陰影。當光照在建立在地面的物體時是否接受（顯示）陰影。
（2）plane.rotation.x ： x軸旋轉，調整x軸位置。
（3）plane.position.x ：x軸座標。與焦點（相機中心點）的距離。
（4）plane.position.y： y軸座標。與焦點（相機中心點）的距離。
（5） THREE.RepeatWrapping 當物體很大的時候，將紋理圖重複填充。

建立樹，花，等植物

建立樹，花的話，咱們可以使用 new THREE.Sprite（）精靈模型物件。Sprite叫精靈，計算機圖學中，精靈指包含於場景中的二維影象或動畫（wiki）。在threejs中，可以使用Sprite載入影象紋理，當然也包括用canvas建立的紋理，因此，canvas能建立什麼影象，Sprite就能建立什麼形狀。簡單來說，Sprite 能將2D影象渲染成3D的效果，所以我在這個專案中所用到的樹等植物就是使用Sprite 建立的。為什麼呢？Sprite是一個永遠面向相機的平面。詳細瞭解地址 Three.js精靈模型Sprite模擬樹林效果

  //建立樹的公用方法
        function CreateMinTree(width, height, x, y, z, path, rote) {
            var textureTree = THREE.ImageUtils.loadTexture("../image/plant/" + path);
            // 批次建立表示一個樹的精靈模型
            var spriteMaterial = new THREE.SpriteMaterial({
                rotation: Math.PI / rote,
                map: textureTree,//設定精靈紋理貼圖
            });
            // 建立精靈模型物件
            var sprite = new THREE.Sprite(spriteMaterial);
            // 控制精靈大小,
            sprite.scale.set(width, height, 1);
            sprite.position.set(x, y, z);
            return sprite;
        }

這個方法是我封裝好了的，只要傳寬、高，x軸、y軸、z軸、紋理路徑、旋轉角度的引數就好了。要想變樹林，或者成堆顯示，只要迴圈就好了。
最後sprite他是不接受陰影的。 sprite.castShadow = true;這樣設定是無效的。

樹紋理圖

當然大家要是需要建立一個真正三維的樹模型，大家可以瞭解一下這個Three.js建立三維樹模型

建立樓模型思路

其實我偷懶了，這些樓全是實心的，也就是說，全是很多，很多的實體形狀與紋理圖組合起來的。剛剛有講到 new THREE.Mesh 可以範例出來一個形狀像——圓形（CircleGeometry）、柱體（CylinderGeometry）、球體（SphereGeometry）、文字（TextGeometry）等等。大家可以瞭解這位大哥的所講的Three.js幾何體。
像教學樓，或是其他樓，我就是先慢慢的做出一棟樓，然後迴圈。改變每一棟樓的座標位置。哈哈哈，不簡單啊，一棟樓裡面，要範例窗戶、空調、圓柱、磚塊等的實體和紋理。這裡都可以使用迴圈來生成樓模型。
所以啊我建議大家，封裝好一個通用的方法，因為我們會大量的重複範例出實體物件，幾個不同的引數，也就是形狀長、寬、高、深度等和座標x、y、z軸等。
當然並不是說只有程式碼生成模型，自己可以使用3D繪製工具去繪製，three.js允許匯入不同格式的3d模型。

這個專案基本的介紹就分享在這裡吧，也差不多了，要實現成啥樣還得自己去琢磨。我就是依著一張原圖就開始傻頭傻腦的開發。

學習資料

唉，這篇我並沒有詳細地去介紹咋樣去建立 渲染器，燈光，相機。因為這步驟的話需要引入很多相關three.js 的js元件。所以前面的介紹，除了功能的介紹之外是想著給大家一個學習的資料。裡面有關於一些Three.js建立基本幾何形狀，和天空之盒等範例程式碼，以及相關three.js的元件js庫。放心，是免費的不要大家的錢。
地址：https://pan.baidu.com/s/1-EdqT4v9X5EhtkjbGyANMQ
提取碼：xgtx
二維條碼獲取：