前情回顧

前幾篇文章大概講述了threejs如何創(chuàng)建場景,創(chuàng)建幾何體,紋理貼圖等...
本篇文章主要講述threejs如何去搭建一個智慧城市虛擬場景(主要講述如何去加載模型以及加載貼圖)

開發(fā)前準備

1. 從官方下載threejs的包,引入到項目中

2. 智慧城市模型一份( 本篇文章主要加載的 OBJ + MTL )

3. 具備前幾章節(jié)講到的一些基礎知識(如果還不會的話請看前幾篇文章哦)

4. 學習了解 MTLLoader.js 和 OBJLoader.js (加載模型主要用到這兩個js)

5. vue 基礎 ( 本人做的所有實例都是基于vue來開發(fā)的 )

先看一波效果吧：

主要代碼如下所示：

1. 引入 MTLLoader.js 和 OBJLoader.js 文件

// MTLimport { MTLLoader } from "../threeLibs/loaders/MTLLoader.js";// ObjLoaderimport { OBJLoader } from "../threeLibs/loaders/OBJLoader.js";

2. 參考官方的例子,首先加載MTL,再去加載對應的OBJ; 這里由于模型比較多,每一個都寫一次加載感覺比較麻煩,所以對加載的方法做了封裝,具體代碼如下:

// 模型按照數組的方式一一對應const list = [        // 一般建筑模型        ["./city/ny1.mtl", "./city/ny1.obj"],        ["./city/ny2.mtl", "./city/ny2.obj"],        ["./city/ny3.mtl", "./city/ny3.obj"],        ["./city/ny4.mtl", "./city/ny4.obj"],        ["./city/ny5.mtl", "./city/ny5.obj"],        ["./city/ny6.mtl", "./city/ny6.obj"],        ["./city/ny7.mtl", "./city/ny7.obj"],        ["./city/ny8.mtl", "./city/ny8.obj"],      ];
      const list2 = [        // 其他模型        ["./city/multi_storied_01.mtl", "./city/multi_storied_01.obj"],        ["./city/triangle_01.mtl", "./city/triangle_01.obj"],        ["./city/white_house.mtl", "./city/white_house.obj"],      ];            // 加載方法封裝      // 加載MTL OBJ    MOLoader(group, list) {      list.forEach((urlList) => {        const mtlLoader = new MTLLoader();        const objLoader = new OBJLoader();        mtlLoader.load(urlList[0], (materials) => {          materials.preload();          //實例化obj加載方法          //設置mtl文件的材質          objLoader.setMaterials(materials);          //文件名          objLoader.load(urlList[1], (object) => {            object.position.set(6691, 604.35216, 2154.6111);            group.add(object);          });        });      });    },

3. 按照分組的方式加載模型,具體 api 方法自行查閱官方文檔 : http://www.webgl3d.cn/threejs/docs/

// 執(zhí)行加載方法this.building = new THREE.Group();this.othersBuilding = new THREE.Group();this.scene.add(this.building);this.scene.add(this.othersBuilding);
this.MOLoader(this.building, list);this.MOLoader(this.othersBuilding, list2);

完整代碼如下：

<template>  <div class>    <div ref="content" style="position: absolute;top:0;left:0;right:0;bottom: 0;overflow: hidden"></div>    <div class style="position: fixed;z-index: 999;background: #fff">      <span class="btn" @click="getCameraPosition">獲取相機位置</span>    </div>  </div></template>
<script>// 引入threejsimport * as THREE from "../threeLibs/three.module.js";//鼠標控制import { OrbitControls } from "../threeLibs/controls/OrbitControls.js";// MTLimport { MTLLoader } from "../threeLibs/loaders/MTLLoader.js";// ObjLoaderimport { OBJLoader } from "../threeLibs/loaders/OBJLoader.js";
export default {  components: {},  data() {    return {      // 創(chuàng)建一個場景      scene: null,      // 創(chuàng)建一個相機      camera: null,      // 創(chuàng)建一個渲染器      renderer: null,      // 模型對象      mesh: null,      // 平面      plane: null,      // 點光源      point: null,
      // step      step: 0,
      building: undefined,      othersBuilding: undefined,    };  },
  mounted() {    this.init();  },  methods: {    // 初始化    init() {      // 初始化容器      var content = this.$refs.content;
      // 創(chuàng)建一個場景      this.scene = new THREE.Scene();      this.scene.background = new THREE.Color("#000");      this.scene.updateMatrixWorld(true);
      // 創(chuàng)建幾何體      //   var geometry = new THREE.SphereGeometry(30, 50, 50);      // // 紋理加載器 （ 此處加載貼圖 ）      // // var texture = new THREE.TextureLoader().load(require('./Earth.png'));
      //   // 幾何體材質對象      //   var material = new THREE.MeshLambertMaterial({      //       color:"#000"      //   });
      //   // 創(chuàng)建網格模型對象      //   this.mesh = new THREE.Mesh(geometry, material);      //   //設置幾何體位置      //   this.mesh.position.x = 0;      //   this.mesh.position.y = 10;      //   this.mesh.position.z = 0;      //   this.scene.add(this.mesh);
      //創(chuàng)建環(huán)境光      var ambient = new THREE.AmbientLight(0xffffff);      this.scene.add(ambient);
      const directionalLight = new THREE.DirectionalLight(0xffffff, 2);      directionalLight.position.set(50, 25, 10);      directionalLight.castShadow = true;      this.scene.add(directionalLight);
      // 創(chuàng)建一個相機      this.camera = new THREE.PerspectiveCamera(        70,        window.innerWidth / window.innerHeight,        1,        1000000      );      this.camera.position.set(6691, 604.35216, 2154.6111);
      //照相機幫助線      // var cameraHelper = new THREE.CameraHelper( this.camera);      // this.scene.add(cameraHelper);
      //坐標軸輔助器，X,Y,Z長度30      // var axes = new THREE.AxesHelper(3000);      // this.scene.add(axes);      // 輔助網格      // let gridHelper = new THREE.GridHelper(3000, 3000);      // this.scene.add(gridHelper);
      // 創(chuàng)建一個平面      const planeGeometry = new THREE.PlaneGeometry(6000, 6000);      const planeMaterial = new THREE.MeshLambertMaterial({        color: 0xffffff,        side: THREE.DoubleSide, //兩面 // THREE.FrontSide 、THREE.BackSide      });      const plane = new THREE.Mesh(planeGeometry, planeMaterial);      //水平面旋轉并且設置位置      plane.rotation.x = -0.5 * Math.PI;      plane.position.x = 0;      plane.position.y = 0;      plane.position.z = 0;      // this.scene.add(plane);
      // 創(chuàng)建渲染器      this.renderer = new THREE.WebGLRenderer({        // 開啟抗鋸齒        antialias: true,        // 開啟背景透明        alpha: true,      });      this.renderer.setSize(window.innerWidth, window.innerHeight);      //插入 dom 元素      content.appendChild(this.renderer.domElement);
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      // this.controls.target.set(-8148, -604, -3919)
      // this.camera.position.set(-10176, 1666, -1674)      this.camera.position.set(6691, 604.35216, 2154.6111);
      const list = [        // 一般建筑模型        ["./city/ny1.mtl", "./city/ny1.obj"],        ["./city/ny2.mtl", "./city/ny2.obj"],        ["./city/ny3.mtl", "./city/ny3.obj"],        ["./city/ny4.mtl", "./city/ny4.obj"],        ["./city/ny5.mtl", "./city/ny5.obj"],        ["./city/ny6.mtl", "./city/ny6.obj"],        ["./city/ny7.mtl", "./city/ny7.obj"],        ["./city/ny8.mtl", "./city/ny8.obj"],      ];
      const list2 = [        // 其他模型        ["./city/multi_storied_01.mtl", "./city/multi_storied_01.obj"],        ["./city/triangle_01.mtl", "./city/triangle_01.obj"],        ["./city/white_house.mtl", "./city/white_house.obj"],      ];
      this.building = new THREE.Group();      this.othersBuilding = new THREE.Group();      this.scene.add(this.building);      this.scene.add(this.othersBuilding);
      this.MOLoader(this.building, list);      // this.MOLoader(this.othersBuilding, list2)
      const t = this;      function render() {        t.controls.update();        t.renderer.render(t.scene, t.camera);        requestAnimationFrame(render);      }      render();    },
    // 加載MTL OBJ    MOLoader(group, list) {      list.forEach((urlList) => {        const mtlLoader = new MTLLoader();        const objLoader = new OBJLoader();        mtlLoader.load(urlList[0], (materials) => {          materials.preload();          //實例化obj加載方法          //設置mtl文件的材質          objLoader.setMaterials(materials);          //文件名          objLoader.load(urlList[1], (object) => {            object.position.set(6691, 604.35216, 2154.6111);            group.add(object);          });        });      });    },
    getCameraPosition() {      console.log("控制器中心", this.controls.target);      console.log("相機位置", this.camera.position);    },  },};</script>
<style lang="scss" scoped>body {  margin: 0;  overflow: hidden;  background: url("http://pic.sc.chinaz.com/files/pic/pic9/202001/zzpic22739.jpg")    center no-repeat;  background-size: cover;}</style>

本人，某個不知名小公司的前端小菜雞，由于技術太菜，業(yè)余時間總是喜歡搗鼓一些花里胡哨的東西，一邊學習一邊分享，希望能夠和大家一起成長，夢想著成為一位前端大大牛。

覺得本文對你有幫助？請分享給更多人或點個在看

關注==>>「前端開發(fā)愛好者」，一起提升前端技能！

Threejs 創(chuàng)建一個虛擬城市三維場景

開發(fā)前準備