3、智慧变电站 - 变压器等设备fbx、gltf模型加载

个人获得模型的途径

1. sketchfab（常用）：可下载免费的3d模型，可以下载很多格式的模型

2. 3D溜溜网（常用）：需要充值成为会员，下载的模型是3dmax格式，需要自己通过3dmax等工具转成gltf、fbx等格式

3. 素材美：同上

模型格式展示

1. gltf模型格式：textures内都是贴图文件

2. glb模型格式

加载gltf、glb模型

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

let gltfLoader = new GLTFLoader();
// 警卫室
gltfLoader.load(`/zhangyan-substation/models/警卫室/scene.gltf`, gltf => {
  gltf.scene.name = "警卫室";
  scene.add(gltf.scene);
});

// 配电室
gltfLoader.load(`/zhangyan-substation/models/配电室.glb`, glb => {
  glb.scene.name = "配电室";
  scene.add(glb.scene);
});

加载fbx模型

import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";

let fbxLoader = new FBXLoader();
fbxLoader.load(`/zhangyan-substation/models/2. 柱子旁边的设备.FBX`, fbx => {
  fbx.name = "柱子旁边的设备";
  scene.add(fbx);
});

调整模型大小、位置、角度

// 配电室
gltfLoader.load(`/zhangyan-substation/models/配电室.glb`, glb => {
  gltf.scene.name = "配电室";
  // 缩放
  gltf.scene.scale.set(0.08, 0.08, 0.08);
  // 位置
  gltf.scene.position.set(47, 0.7, 5);
  // 设置旋转Y轴45度
  gltf.scene.rotation.y = -0.5 * Math.PI;
});

通过clone加载多个模型

在我们具体项目中常常需要加载很多个同一类型模型，一个一个的定位太麻烦，而且每次都去通过loader加载也会影响很大的效率，所有我都是通过clone搭配group，计算好每个模型直接的间距，再用循环去克隆模型去渲染
拿加载变压器为例

addTransformerModel() {
  let gloader = new GLTFLoader();
  // 创建group
  let transformerGroup = new THREE.Group();
  transformerGroup.name = "transformerGroup";
  // let list = []
  gloader.load(`/zhangyan-substation/models/8. 变压器.glb`, gltf => {
    gltf.scene.scale.set(0.9, 0.9, 0.9);
    gltf.scene.rotation.y = -0.5 * Math.PI;
    let transformerPylonModel = gltf.scene;

    for (let i = 0; i < 6; i++) {
      let model1XOffset = i * 12;
      let model1 = transformerPylonModel.clone();
      model1.name = (i + 1) + '#变压器';
      model1.position.set(41 + model1XOffset, -0.1, 104.7);
      transformerGroup.add(model1);
    }
    scene.add(transformerGroup);
  });
},

整体效果如下

好了，到了这一步骤，已经把场景内部的模型摆放完毕，接下来就是教大家处理场景外的电塔及电线的功能

PS：项目源码及3d模型请添加wx：z13964122832备注“变电站源码”