基于vue3 BIMFACE 单楼层平滑切换

最新推荐文章于 2025-04-24 09:01:16 发布

huanglihui1007

最新推荐文章于 2025-04-24 09:01:16 发布

阅读量420

点赞数 2

分类专栏：前端 javascript bimface开发文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/huanglihui10071030/article/details/136370525

版权

这篇文章介绍了如何在Vue3项目中使用自定义hook`useBimLoad`来处理模型的加载，包括获取accesstoken和viewtoken，初始化3D视图，以及模型加载后的回调和渲染控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模型加载

vue3使用hooks实现模型的加载

hooks文件: useBimLoad.js

import { getAccessToken, getViewToken } from "@/api/bimface";//获取accessToken和viewToken，自行编写
import { toRefs } from "vue";

export function useBimLoad(props) {
  const { renderDone,backgroundColor= [84,111,33,1] } = props;
  const pdata = reactive({
    viewer3D: null,
    timer: null,
    drawableContainer: null,
  });
  const { viewer3D, drawableContainer} = toRefs(pdata);
  const getAccessTokenData = async () => {
    const accessTokenRes = await getAccessToken();
    let accessToken = "";
    if (typeof accessTokenRes === "string") {
      accessToken = accessTokenRes;
    } else {
      const {
        data: { data },
      } = accessTokenRes;
      const { token, expireTime } = data;
      accessToken = token;

      // 写入cookie
      document.cookie = `accessToken=${accessToken};expires=${new Date(
        expireTime
      ).toUTCString()}`;
    }
    return accessToken;
  };
  const getViewTokenData = async (accessToken, fileId) => {
    const viewTokenRes = await getViewToken(accessToken, fileId);
    const { data } = viewTokenRes;
    return data.data;
  };
  // 初始化viewer3D
  const viewer3DInit = () => {
    let view = document.getElementById("view");
    let config = new Glodon.Bimface.Application.WebApplication3DConfig();
    // 背景色
    config.backgroundColor = [
      {
        // color: new Glodon.Web.Graphics.Color(0, 0, 0, 0),
        color: new Glodon.Web.Graphics.Color(

最低0.47元/天解锁文章