threejs加载fbx模型文件
分类: WEB前端 145 0
一、前言
- 最近刚开始做的一个项目,其中有个模块用到threejs加载fbx模型,记录下实现步骤
- 官方文档:https://threejs.org/docs/
- 可以从github下载源码,本地运行后对其提供的实例进行修改。
二、vue3项目引入
-
pnpm add three @types/three
-
在使用的组件中进行引入
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";
-
完整代码如下:
<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 条评论关于 “threejs加载fbx模型文件”