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.
169 stars 40 forks source link

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

Open ciki6 opened 3 months ago

ciki6 commented 3 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.