版本基于 threejs vue3 写的一个 3D 模型预览器，可以加载 GLB 和 GLTF 格式文件,支持模型动画播放预览控制；

关键接口参数定义： export type LightType = 'single' | 'all'; export type ModelType = 'GLTF' | 'OBJ' | 'FBX';

export interface V3 { x: number; y: number; z: number; }

export interface IViewerOptions { fov?: number; clearColor?: number; alpha?: boolean; opacity?: number; shadowEnabled?: boolean; lightType?: LightType; cameraPosition?: number[]; }

export interface ISceneData { lightColor: number | string; lightness: number; directLightColor: number | string; directLightness: number; skyboxImgs: string[]; }

export interface IGLTFOptions { type: ModelType; url: string; position?: Vector3 | V3; rotation?: Vector3 | V3; scale?: number; }

使用： 在全局引用组件：

import { threeModelView } from 'three-model-view'; app.use(threeModelView);

在页面中使用： <model-view ref="modelComponent" :viewData="viewData" :modelData="modelData" @loadModelCom="loadModelCom" :width="250" :height="250" >

import { ModelObject } from "three-model-view";

const viewData = { clearColor: 0x333333, lightType: "all", alpha: true, opacity: 0.5, cameraPosition: [30, 30, 30], }; const modelData = { type: "GLTF", url: "model/boxman.glb", scale: 40, position: { x: -5, y: -20, z: 0 }, };

const modelComponent = ref(null);

onMounted(() => { modelComponent.value.loadModelHandler(); });

function loadModelCom(model: ModelObject) { model.playAni("run", true); }