Coder Social home page Coder Social logo

pattern-x / gemini-viewer-examples Goto Github PK

View Code? Open in Web Editor NEW
173.0 173.0 42.0 230.16 MB

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.

CSS 6.37% JavaScript 4.39% HTML 44.46% TypeScript 44.77%
3d-model-viewer 3d-models 3d-viewer bim bim-viewer dae drawing dwg dwg-viewer dxf dxf-viewer gltf ifc obj panorama pdf-viewer stl threejs vr webgl

gemini-viewer-examples's People

Contributors

hujinwei3 avatar lisp1012 avatar pattern-x avatar yanzexuan1 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gemini-viewer-examples's Issues

BIM viewer

I looked at the example for bim viewer and saw you are implemeting by using a gltf file and it works fine.
But what if i dont have gltf files instead i have obj, mtl & a jpg texture files, i followed the examples and was able to load the model but the texture and colors did not come up, attaching my sample code please have a look

import {
  BimViewer,
  BimViewerConfig,
  ModelConfig,
} from "@pattern-x/gemini-viewer-threejs";
import { useEffect } from "react";

const OBJ = () => {
  useEffect(() => {
    const viewerCfg: BimViewerConfig = {
      containerId: "myCanvas",
      enableToolbar: true,
      enableSpinner: true,
      language: "en",
    };

    const modelCfg: Array<ModelConfig> = [
      {
        modelId: "id_0",
        name: "sample",
        src: require("./assets/Model.obj"),
      },
      {
        modelId: "id_1",
        name: "sample1",
        src: require("./assets/Model.mtl"),
      },
      {
        modelId: "id_2",
        name: "sample2",
        src: require("./assets/Model_0.jpg"),
      },
    ];

    const viewer = new BimViewer(viewerCfg);

    const load = async () => {
      modelCfg.forEach(async (mdl) => {
        await viewer.loadModel(mdl, (e) => {});

        viewer.viewFitAll();
        console.log("Loaded");
        viewer.goToHomeView();
      });
    };
    load();
  }, []);

  return <div id="myCanvas"></div>;
};

export default OBJ;

Support Cyrillic labels

How to make Cyrillic labels display correctly when viewing drawings in DWF format?
There are many drawings in Russian, but they are not displayed properly, only numbers are visible.

启动项目警告

图片
请问这个警告应该怎么解决呢?是我这边的引用问题,还是SDK的问题呢?

serialize and de-serialize dxfViewer scene

For a large dxf file, it takes about 10 seconds before user can see the model. Below is the timeline from the console log:

[DxfViewer] Initialized in 0.027s
[DxfViewer] Font file(s) load time in 0.046s
[DxfLoader] Loaded DxfData from indexedDb in 0.436s
[DxfLoader] loadEntities() done in 4.493s
[DxfViewer] Loaded 'data/Large_Model.dxf' in 4.933s, adding to scene...
[DxfViewer] Activated layout 'Model' in 0.004s
[DxfViewer] Added 'data/Large_Model.dxf' to scene in 5.163s

As can be seen here, the loadEntities() took ~4.5 seconds (despite the function name, I think this is the parsing step), and the adding to scene took ~5 seconds.

How can I serialize the scene in the dxfViewer and de-serialize the scene in the dxfViewer to reduce this 10 seconds to sub second? Please refer to the following discussion for what I am talking about.

https://discourse.threejs.org/t/the-best-way-to-save-and-open-three-js-scene/16158

toolbar

请问toolbar工具栏的设置和图层按钮点击不生效需要配置什么吗

is addHotpoint() asynchronous?

The document.getElementByID() gets nothing right after the viewer.addHotpoint(). Calling document.getElementByID() 10 seconds after the viewer.addHotpoint() will get the DOM object. Is there an event I can wait to run the document.getElementByID() ? Also, it does not get me the HTMLElement, it returns Node.

unexpected circular polygon

As shown below, the dxfViewer created a circular polygon at the center of the scene which is totally not expected.

dxfviewer-unexpected-polygon

For reference, below is what AudoCAD show

autocad_no_polygon

To facilitate your troubleshooting, here is the DXF file.

unexpected_polygon.zip

toolbar menu label wider than the cell

As shown in the following screenshot, the label "Screenshot" is wider than the cell of that menu item. Can the width of cell of toolbar menu item be "auto fit content"?

image

DxfViewer打开dxf报错

1.当dxf里含有MULTILEADER(多重引线)时,DxfViewer打开会报错。
2.字体设置似乎不太正确,我设置了字体,但还是显示乱码。

dwg2dxf.exe

Which converter for dwg2dxf.exe do you use? Can i download it somewhere?

romans.shx rendered wrong

The following is how the romans.shx font looks like in AutoCAD

AutoCAD_romans_shx

The following is how the romans.shx font looks like in gemini-viewer-threejs

gemini-viewer-threejs_romans_shx

As can be seen in the gemini-viewer-threejs, the letter "C" is flipped vertically and the width of all characters are smaller than what they should be.

Language issues

Is there an option to change this toolbar language to english
Screenshot 2023-02-02 at 11 51 56 AM

About continuous loading of local DXF files

I’ve found that when opening a DXF file and then opening another new DXF file, the two will overlap in display. How can I make it so that when opening the second file, it clears the first one?

script import

Hello, how to use script import instead of NPM installation

自适应

老哥 怎么默认加载dxf自适应宽高呢

line color

Hello, I have a question now. The color of the lines drawn after changing the background color through the toolbar has not changed. The original white lines cannot be displayed on a white background. Is there any way to change the line color after changing the background color?

broken splines

Below is the AudoCAD rendering of the splines
AutoCAD_continuous_splines

Below is the gemini-viewer-threejs rendering of the splines (broken segments are circled out)
gemini-viewer-threejs_broken_splines

Below is the console log that is probably related to the issue
console_log_warning

I try this in VUE3 but the canvas keeps zooming

<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.

dwg2dxf.exe

May I ask how to use dwg2dxfexe to convert a dwg file to a dxf file?thanks

Model display size

I want the model to specify its size when it is initially loaded, or have it completely fill the view. How do I set this up?

how to hide items on the toolbar

Is it possible to hide some items on the toolbar? Say, I would like to hide the "Measure" menu item on the following toolbar.

image

failed to load dxf with image in it

When loading a DXF file with linked image in it, the viewer gets stuck at "Loading 45.00%". Please help. The console output is below

image

The same issue happens when loading a DXF file with OLE image in it.

can you give me the gemini-viewer.esm.min.js orginal code?

How did you implement SolidHatch in DxfViewer?

I am amazed at the incredible performance.

I'm curious as to whether you did the triangulation separately or used another method.

I want to see the entire dxfviewer part. I am also a vargan/dxf-viewer contributor.

loadModelAsync() freezes the whole GUI

The "loading model into scene" portion of the loadModelAsync() function is freezing up the whole GUI. Is it possible to run that in a web worker instead of in the main thread?

TEXT width factor not working

It seems that gemini-viewer does not scale TEXT based on the width factor?

The following screenshot is from AutoCAD showing the "CABINA 34" has width factor of 0.8.
AutoCAD

The following screenshot is from gemini-viewer which looks like the width factor is 1
gemini-viewer

Markups

Is there a way i can export all the markers drawn in DXF viewer so that i can save it in db?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.