Three.js实战项目 智慧城市(二)

概述

如有不明白的可以加QQ：2354528292；wx: aichitudousien
更多教学视频请访问：https://space.bilibili.com/236087412

我们接着上一篇文章接着向下做，此时我们已经成功创建了场景，现在我们来加载模型和天空盒
先看效果

智慧城市项目录制视频

科技风版本：

智慧城市二期视频

加载模型

1. 在ZThree类中加入loaderObjModel方法用来加载模型

// 加载obj模型
  loaderObjModel(path, objName, mtlName) {
    return new Promise(resolve => {
      new MTLLoader()
        .setPath(path)
        .load(mtlName + '.mtl', function (materials) {
          console.log(materials)
          materials.preload();

          // 加载obj
          new OBJLoader()
            .setPath(path)
            .setMaterials(materials)
            .load(objName + '.obj', function (object) {
              resolve(object)
            });
        });
    })
  }

2. 在vue文件中调用此方法
   模型是我随便在网上找的，各位可以随意在网上找一个obj模型来测试即可

	cityModel = await app.loaderObjModel(
        "model/city/",
        "CityIslands",
        "City_Islands"
      );

      scene.add(cityModel);

此时我们可以在页面上看到的效果是

此时有些小伙伴可能会比较奇怪的是为什么初始化进来时看不到模型或是只能看到模型的一小部分，那是你的相机设置的位置不对，教给大家一个小技巧，我们把app对象给挂载到window对象上，然后我们在调整控制器到视角最好的位置，此时打开控制台，输入app.camera.position和app.controls.target

此时我们就可以看到对应的参数，然后我们在设置一下就ok了

camera.position.set(18, 364, 397);
controls.target = new THREE.Vector3(2, 44, -32);

模型下载链接：https://download.csdn.net/download/qq_39503511/20044899
此时看到的应该就和上面的效果图是一样的了

创建天空盒

1. 在ZThree类中加入loaderSky方法用来加载模型

// 加载天空盒
  loaderSky(path) {
    let skyTexture = new THREE.CubeTextureLoader()
      .setPath(path)
      .load([
        "px.jpg", //右
        "nx.jpg", //左
        "py.jpg", //上
        "ny.jpg", //下
        "pz.jpg", //前
        "nz.jpg" //后
      ]);

    this.scene.background = skyTexture;
    this.renderer.setClearAlpha(1);
  }

2. 在vue文件中调用此方法

app.loaderSky('texture/sky/');

此时我们就已经成功的创建了天空盒，天空盒图片素材命名规则

现在创建好模型和天空盒了，接着我们来给场景中添加点车流，让小车在该城市中行驶
智慧城市(三): 地址