pattern-x / gemini-viewer-examples

Examples and demos for gemini-viewer sdk, which is a WebGL based BIM model viewer, built on three.js. It is used to view dwg/dxf, gltf, obj, ifc models, etc.
206 stars 43 forks source link

I try this in VUE3 but the canvas keeps zooming #125

Open ciki6 opened 8 months ago

ciki6 commented 8 months ago
<script setup lang="ts">
import { DxfViewer, DxfViewerToolbarPlugin, AxisGizmoPlugin, ScreenshotPlugin, MeasurementPlugin, StatsPlugin, BottomBarPlugin, DxfViewerConfig, ModelConfig } from "@pattern-x/gemini-viewer-threejs";

const viewerCfg: DxfViewerConfig = {
  containerId: "dxfViewer",
  enableSpinner: true,
  enableLayoutBar: true,
};
const modelCfg: ModelConfig = {
  modelId: "id_0",
  name: "sample",
  src: "/public/asd.dxf",
}
const fontFiles = ["/public/fonts/hztxt.shx", "/public/fonts/simplex.shx"];

const viewer = new DxfViewer(viewerCfg);
await viewer.setFont(fontFiles);
await viewer.loadModelAsync(modelCfg, (event) => {
  const progress = (event.loaded * 100) / event.total;
  console.log(`${event.type}: ${progress}%`);
});
console.log("Loaded");
// viewer.goToHomeView();
new AxisGizmoPlugin(viewer, { ignoreZAxis: true });
new BottomBarPlugin(viewer);
new MeasurementPlugin(viewer);
new StatsPlugin(viewer);
new ScreenshotPlugin(viewer);
new DxfViewerToolbarPlugin(viewer);

</script>

<template>
  <canvas id="dxfViewer"></canvas>
</template>

<style scoped>

#dxfViewer {
  width: 1920px;
  height: 1080px;
  display: inline-block;
}
</style>

In Vue 3, I am using this library, and after opening the page, the height attribute of the canvas inside the div with the id "gemini-viewer-container" keeps increasing.

qianyededoufu commented 2 months ago

是会一直加长么 我也碰到了 我是用固定高度解决的 拿到屏幕的宽高然后计算 然后在onMounted里执行初始化这些就可以了

<script setup lang="ts">

  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  import {DxfViewer, DxfViewerToolbarPlugin, AxisGizmoPlugin,
    ScreenshotPlugin, MeasurementPlugin, StatsPlugin,
    BottomBarPlugin, DxfViewerConfig, ModelConfig} from "@pattern-x/gemini-viewer-threejs";
  import { propTypes } from '@/utils/propTypes';
  let windowHeight = ref(0);
  let windowWidth = ref(500);

  const getWindowSize = () => {
    windowHeight=window.innerHeight*0.7;
    windowWidth=window.innerWidth;
    console.log("------------------计算窗体宽高--------------------")
    console.log(windowHeight);
    console.log(windowWidth);
    console.log("------------------------------------------------")
  }
  getWindowSize();

  onMounted(() => {
    dxfFileInit();
  });

  const dxfFileInit = () => {
    const viewerCfg: DxfViewerConfig = {

      containerId: "myCanvas",
      enableSpinner: false,
      enableLayoutBar: false,
    };
    const modelCfg: ModelConfig = {
      modelId: "id_0",
      name: "wowo-famen-1",
      src: "../src/assets/dxfExample/wowo-famen-1.dxf",
    }
    const fontFiles = ["../src/assets/fonts/hztxt.shx", "../src/assets/fonts/simplex.shx"];
    const viewer = new DxfViewer(viewerCfg);
    viewer.setFont(fontFiles);
    viewer.loadModelAsync(modelCfg, (event) => {
      const progress = (event.loaded * 100) / event.total;
      console.log(`${event.type}: ${progress}%`);
    });
    console.log("Loaded");
    new BottomBarPlugin(viewer);
    new MeasurementPlugin(viewer);
    new StatsPlugin(viewer);
    new ScreenshotPlugin(viewer);
    new DxfViewerToolbarPlugin(viewer);
    viewer.goToHomeView();
  }
</script>

<template>
  <div class="app-container">
    <div id="myCanvas" v-bind:style="{height:windowHeight+'px'}"></div>
  </div>
</template>

<style scoped lang="scss">

</style>