kovacsv / online3dviewer Goto Github PK
View Code? Open in Web Editor NEWA solution to visualize and explore 3D models in your browser.
Home Page: https://3dviewer.net
License: MIT License
A solution to visualize and explore 3D models in your browser.
Home Page: https://3dviewer.net
License: MIT License
Reported by @mo8Zomo0:
Hello !
I have a request maybe an already implemented enhancement.
Would it be or is it already possible to embed directly the viewer on a html page?
In this case is it possible to have several instances of the viewer in the same web page to render simultaneously different 3d graphics?
In fact we would shift with a button from page view to full screen mode similar to existing default mode.
I know almost nothing to Javascript. So please be patient...
Thank you !
Make it possible to export any model to gltf and glb.
Hi kovacsv,
Your work is very useful, but I've got a problem with a very specific case. I would like to know if there is a possibility to use the 3dviewer with a default file loaded with the page as your example of JSModeler demonstration with the cuboid? My file is stored on my server and have a specific href to direct access.
For example, the attached OBJ is not rendered but I can see it in 3D Builder. Thank you.
In case of multiple exported files they should be downloadable in one zip file.
Hi Man,
Amazing code you have here. I'm not sure what I'm doing wrong here. But the embedded version doesn't seem to work in Chrome I get a "Conversion Failed". It works fine in Edge and Firefox.
Could you help at all?
Hey, really cool project. Planning to use the embedded version with STLs over on https://openflexure.org
We use Gitlab for turning our design into STLs and use githack.com to get CORS access to those assets. I noticed that the using the following URL works:
but not this which re-directs to the same file.
Is it because it doesn't ignore the query parameter ?job=STLs
?
We'd like to use Online3DViewer on the website of a client, to show 3D files of their fysical products. Is this possible?
I can't figure out a way to feed Online3DViewer a specific file, instead of giving the user the option to upload a file.
Hello Viktor!
Do you plan to support textures in the future?
Hi, Love the app you made <3 just amazing.
Could you please consider adding a PAN function? Really, that's really important, to be able to view a 3d model , you need two things. One is to zoom in and out (which you have), and the other is to PAN, so - move the center of the screen around (move thru the object). It's a really really really basic option and the lack of which kind of makes your app unusable for real life situations. Which is a shame, since it's a really amazingly well done and simple app to use
Please consider adding a PAN option, (PAN, move, call it what you want), It's a must have feature to be able to really use the app properly.
Thanks! :)
First thank you for your project, it's very clean.
Is it possible to add a tool to make measurement on the model :
First of all, thank you for the fantastic project! I am having issues loading files using the hash method. Maybe because I am using localhost in testing? Here is an example I am trying:
file:///C:/Users/fybin/Desktop/CEASEFIRE_CFF800ULarchitecture350/Online3DViewer-master/Online3DViewer-master/website/index.html/#testfiles/CFF.3ds
Thank you for your help!
If the exported format doesn't handle texture coordinate transform (like obj), we should transform texture coordinates according to the information in the material.
So it can work with a mouse with no right button.
Hi! First of all thx for the project!
I am trying to display a exported project form metashape (export model > wavefront obj with jpg texures) on a self contained web page.
It is just a single model. I have an other model which works fine.
i am using
<canvas id="fullscreen" class="3dviewer" sourcefiles="3d.jpg|3d.obj|3d.mtl" width="200" height="200"></canvas>
In the chrome console I can see all files get loaded and I had an other model with the exact
setup which works fine. On this model only the grey shape is visible but the textures do not show up.
When I use the version where I can manually upload the files the model shows fine.
I am using the latest chrome (89.0.4389.114) on the latest macos (11.2.3).
the only error (lets ignore the favicon ;-) I see on the developer console is
content.js:4 [Deprecation] chrome.loadTimes() is deprecated, instead use standardized API: nextHopProtocol in Navigation Timing 2. https://www.chromestatus.com/features/5637885046816768. (anonymous) @ content.js:4 content.js:5 [Deprecation] chrome.loadTimes() is deprecated, instead use standardized API: nextHopProtocol in Navigation Timing 2. https://www.chromestatus.com/features/5637885046816768.
but that the same on the one which properly shows.
Any hint what might be wrong or how to debug?
Hi Viktor,
very impressive work!!
I have a question about this statement: Define file urls as location hash
Does it mean to specify which file to load from URL?
How can I do this?
Do you have an example?
Cheers,
Hinko
Hi Viktor,
i used your code to open ply files but it is not supported. I just tried to convert it to * .obj it works but no texture color. Can you help me ?
thanks thanks thanks
Hi,
First of all, thank you for your project because it is what I need, and it would be perfect if the embeddable mode could enter into a mode compatible with google cardboard.
Three.js allows it, as you can see in https://threejs.org/examples/#webvr_cubes so I hope it would not be a huge task and I think it will give online3dviewer a great improvement
Hello sir,Thanks for your code,I study your code for several day,but i still don't know how to show stable off file,and not load off file.If you have any idea,please let me know,Thank you very much.
I can't get models to appear reflective/shiny. I have a model that is shiny when I load it in the Windows 3D model program but not on here. Is it possible?
Would it be possible or even good idea to have the JSM.ConvertURLListToJsonData .onFinish function in LoadOnline3DModels to send an event after the viewer.Draw() call? Would help clients track when the canvas is about to be shown.
hello,Thank you very much for your team's excellent product.
Is our software support step ?
Can we calculate the volume of 3D files?
The tool seems useful, thanks for it. But I'm having a hell of a time figuring out how to rotate my model to the orientation I want... the mouse X axis and Y axis seem bound to different rotation axes, but there's a third axis I can't figure out how to rotate along. Arcball rotation would be much more intuitive.
Hi,
I'm opening the index.html on my browser and it look like this:
file:///Users/francisco/File%20Maker/Online3DViewer-master/website/index.html
but when I tried enter to the file directly like this:
file:///Users/francisco/File%20Maker/Online3DViewer-master/website/index.html/#testfiles/cube.3ds
Nothing happened! I get a white page.
Can you help me?
Please :)
It would be great if one could upload a file (or point to it) and have it loaded automatically, sort of like 3d version of pastebin or imgur. Is this doable?
I'm working on a website and trying to use the embeddable version of the 3D Viewer in order to show some models with textures (obj+mtl+tex as PNG).
I've pretty much followed the embeddable/fullscreen approach, by adding the following event listeners in my index.html:
<script type="text/javascript" src="assets/js/online3dembedder.js"></script>
<script type="text/javascript">
function OnResize() {
var canvas = document.getElementById('3dcanvas');
if (canvas != undefined) {
canvas.width = document.body.clientWidth * 0.7;
canvas.height = document.body.clientHeight * 0.7;
}
}
function OnLoad() {
OnResize();
LoadOnline3DModels();
}
window.addEventListener('load', OnLoad, true);
window.addEventListener('resize', OnResize, true);
window.addEventListener('reloadCanvas', OnLoad, true);
</script>
The reloadCanvas
event is a custom event I'm dispatching whenever a new model is selected by the user. The user does not actually own the model files as they're hosted on my website, they just select a logical entity from a list and this triggers the canvas reload with new, different sourcefiles.
Almost all the time when performing this operation I can see there is some problem (might be dirty context more than anything else) with what seems to be loading textures, as they're either applied wrongly to the model or what appears to be a previous texture is being used instead of the current one - this doesn't happen as soon as the new model is loaded, but only when the user zooms in/out of the model or rotates the model around.
When this happens the following is logged on the console:
three.min.js:543 WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program
v @ three.min.js:543
three.min.js:562 WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program
v @ three.min.js:562
WebGL: INVALID_OPERATION: uniform3f: location not for current program
WebGL: INVALID_OPERATION: uniform1f: location not for current program
[...]
three.min.js:558 WebGL: too many errors, no more errors will be reported to the console for this context.
v @ three.min.js:558
Most likely for my use-case i need some cleanup operations being performed on the viewer side when reloadCanvas
is being consumed? Sadly, I could not find any examples related to reloading canvas+switching models in embedded scenario, but I assume these changes would have to be made in the online3dembedder.js
file.
Bug preview: https://i.imgur.com/3w5ufGE.png
Website to replicate the bug (just fiddle around selecting different models and it will happen once u rotate/zoom in on the new model): https://mhw-model-viewer.web.app/
Project sourcecode: https://github.com/dsibilio/mhw-models-viewer
P.S.: Amazing work on the library! Ty very much for making this open-source 🥳 I'm also available for discussing this anywhere else you may see fit (eg. Discord or similar) for faster feedback and then report here once we get to the solution! 👋
how to export step from Obj?
When trying to load a file using #folder/file.3ds method the error message "Failed to open file. Maybe something is wrong with your file." is shown. Although, that same file loads fine if using the interface to upload.
Using both URL and local to load the file does not work. Permissions on the uploaded file is the same as in the examples folder.
Loading example files does work.
Files i'm unable to load are files exported from Sketchup.
Is there some trick i need to do to make these files work?
Make it possible to export the current view as a png file.
Hello,
So far I used online3Dviewer with Firefox 60 and it works fine.
But I tried it with last version of Firefox 68 and obtain the same error as with
#7
Is it related to CVE-2019-11730: Same-origin policy treats all files in a directory as having the same-origin?
Besides it works fine in Edge or when I manually load the file in normal version.
Please tell a workaround so that it keeps being so practical !
Thank you
hello Kovacsv,
I tried to open multiple files in web browser, both below urls were fail to show the real modle, the png format file can not be showed in the file list
http://localhost/test/#http://localhost:83/adss/obj-s/mesh-T1D.obj,mesh-T1D.mtl,mesh-T1D_u1_v1.png
http://localhost/test/#http://localhost:83/adss/obj-s/mesh-T1D.obj,http://localhost:83/adss/mesh-T1D.mtl,http://localhost:83/adss/mesh-T1D_u1_v1.png
How to calculate surface area and volume
Many people like me use PMD / PMX editor to create or import models into MMD. It would be nice if we did not have to somehow convert them to a supported format for this viewer.
hello Kovacvs, I have one question, what is the upper limit of data size? I have tried to open a file about 700mb with this tool, it finally crash or nothing shows.
Look forward yo your reply, thank you!
I want define URL to open file (file in web local folder) - Where i can change or add text box for url to open
My english not well. i live in vietnam, i work on 3d design
Thank again for your kind.
Hi Viktor! Thank you for the repository!
I want to have an option to save the camera position to local storage, so after refreshing the page the model will appear from the same angle.
I didn't understand how the convert function works so I can save the viewer to json and load it again.
will appreciate your help on this one.
Thanks!
Hello and thank you for your great work!
BUT whenever the 3ds file has more than one object only the first one is displayed.
And exporting to STL removes any color and last common choice OBJ is not a binary format
Thanks again !
Hello Viktor!
Thank you so much for creating this repository. Your work is amazing!
I wanted to know if the viewer is suppose to be able to render multiple files at the same time, as I see the "multiple" directive in the file input html, however I'm only able to render one file at a time.
Thanks again!
is it possible?
I tried opening many pairs of obj and mtl files. It always says mtl file is missing. I'm using the online demo. Thanks.
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.