使用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
二維碼獲取：