threejs加载fbx模型文件

Jiafeng

分类: WEB前端 145 0

一、前言

  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>
    
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
threejs

作者简介: Jiafeng

共 0 条评论关于 “threejs加载fbx模型文件”

Loading...