pattern-x / gemini-viewer-examples Goto Github PK
View Code? Open in Web Editor NEWExamples 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.
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.
It would be really great if each hotpoint can be dragged the same way like a markup.
This issue is orignally from #47 (comment)
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;
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.
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工具栏的设置和图层按钮点击不生效需要配置什么吗
I tested the markup demo for dxf and pdf files. but I have the following problem: I can only load the dxf file rac_basic_sample_project. Other dxf and pdf files cannot be loaded, can someone explain to me why?
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.
说明文档API在哪呢
As shown below, the dxfViewer created a circular polygon at the center of the scene which is totally not expected.
For reference, below is what AudoCAD show
To facilitate your troubleshooting, here is the DXF file.
1.当dxf里含有MULTILEADER(多重引线)时,DxfViewer打开会报错。
2.字体设置似乎不太正确,我设置了字体,但还是显示乱码。
Which converter for dwg2dxf.exe do you use? Can i download it somewhere?
What is the API to fit the DXF content to window size?
How can I change the "正在加载" to "Loading"?
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?
Hello, how to use script import instead of NPM installation
For some reason, I can no longer add hotpoint on both the demo and example now. Please help.
How does the dxf shx font file handle display? Do you have any tips or codes related to this
The gemini-viewer.esm.min.js is around 3.6M, is there possibility to shrink its size?
There are too many console output by default. How do I change the logging level to, say, "error"?
老哥 怎么默认加载dxf自适应宽高呢
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?
dxfviewer renders DASHDOT linetype as solid line. Below is the screenshot from AutoCAD.
Below is the screenshot from dxfviewer
To facilitate your troubleshooting, please find below the dxf file.
<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.
May I ask how to use dwg2dxfexe to convert a dwg file to a dxf file?thanks
This question is originally from #47 (comment)
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?
uploading ifc files is not supported
url:
https://pattern-x.github.io/gemini-viewer-examples/#/Upload_your_local_model
console out:
[LoadingHelper] IFC is not supported directly since three.js r150!
(anonymous) @ gemini-viewer.esm.min.js:1
gemini-viewer.esm.min.js:1 Uncaught (in promise) Not supported!
Is it just me using it the wrong way?
for some DXF project the parse seems to delete some line
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.
Here is the file
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?
bim树的读取完善了吗?我怎么得到模型的bim树呢
Is there a way i can export all the markers drawn in DXF viewer so that i can save it in db?
What is the license of @pattern-x/gemini-viewer-threejs?
Is commercial use permitted?
Hi I tried with ifc file on Demo
https://pattern-x.github.io/gemini-viewer-examples/#/demo/
But seem It's not working.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.