three.js加载3d模型_Threejs 创建一个虚拟城市三维场景

前情回顾

前几篇文章大概讲述了threejs如何创建场景,创建几何体,纹理贴图等... 

本篇文章主要讲述threejs如何去搭建一个智慧城市虚拟场景(主要讲述如何去加载模型以及加载贴图) 

开发前准备

1. 从官方下载threejs的包,引入到项目中 2. 智慧城市模型一份( 本篇文章主要加载的 OBJ + MTL ) 3. 具备前几章节讲到的一些基础知识(如果还不会的话请看前几篇文章哦) 4. 学习了解 MTLLoader.js 和 OBJLoader.js (加载模型主要用到这两个js) 5. vue 基础 ( 本人做的所有实例都是基于vue来开发的 ) 先看一波效果吧 ：

主要代码如下所示： 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