一、前言

1. 最近刚开始做的一个项目，其中有个模块用到threejs加载fbx模型，记录下实现步骤
2. 官方文档：https://threejs.org/docs/
3. 可以从github下载源码，本地运行后对其提供的实例进行修改。

二、vue3项目引入

1. pnpm add three @types/three

2. 在使用的组件中进行引入

   import * as THREE from "three";
   import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
   import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
   import { TGALoader } from "three/examples/jsm/loaders/TGALoader";

3. 完整代码如下：

   <template>
      <div class="StationDetailPopPanel">
          <div class="StationDetailPopPanel-top_title">
              <div class="StationDetailPopPanel-popname">节面</div>
              <div
                  class="StationDetailPopPanel-closed"
                  :class="[theme[ns + '-button-closed']]"
                  @click.stop="handleClose"
              ></div>
          </div>
   
          <div class="StationDetailPopPanel-bd">
              <LoadingCss v-show="!fbxLoaderInit"></LoadingCss>
              <div
                  v-show="fbxLoaderInit"
                  ref="modelThree"
                  class="StationDetailPopPanel-model"
              >
                  <div class="rotate-btn" @click="handleAutoRotate">
                      {{ autoRotate ? "关闭旋转" : "开启旋转" }}
                  </div>
              </div>
          </div>
      </div>
   </template>