kovacsv/online3dviewer

A solution to visualize and explore 3D models in your browser.

Online 3D Viewer

Online 3D Viewer (https://3dviewer.net) is a free and open source web solution to visualize and explore 3D models in your browser. This repository contains the source code of the website and the library behind it.

Live website  -  Website documentation  -  Developer documentation  -  Discord server

Example

Check the live version!

Supported file formats

• Import: 3dm, 3ds, 3mf, amf, bim, brep, dae, fbx, fcstd, gltf, ifc, iges, step, stl, obj, off, ply, wrl.
• Export: 3dm, bim, gltf, obj, off, stl, ply.

External Libraries

Online 3D Viewer uses these wonderful libraries: three.js, pickr, fflate, draco, rhino3dm, web-ifc, occt-import-js.

online3dviewer's Issues

add .fbx, .flt, .p3d file support

is it possible?

Load File Hash URL Method Not Working

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!

Send event after viewer drawn

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.

Reflective/shiny models

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?

Some models are not rendered

For example, the attached OBJ is not rendered but I can see it in 3D Builder. Thank you.

1511427838.zip

Show grid behind the model

Embedding several instances on the same webpage

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 !

Recalculate texture coordinates based on material during export

If the exported format doesn't handle texture coordinate transform (like obj), we should transform texture coordinates according to the information in the material.

PNG Transparency

With some file containing a transparency it happens

Is it possible to correct that?

VR Mode

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

Not working in Google Chrome?

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?

can't load files form server url

Hello Kovacsv, thanks for your great project!
Now I facing an issue, I build two web servers with windows IIS, one for 3dviewer, one for file server, both of them work fine.
but while I thy to open below link, it pop up "No readable file found." Please help me how to troubleshooting.

http://localhost/test/#http://localhost:83/adss/cube.3ds

3dviewer.net as a 3d pastebin?

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?

Show Edges in 3D

Hi,
Is there a way to show the edges with a black line ?

how to export step from Obj?

how to export step from Obj?

Always says missing mtl file

I tried opening many pairs of obj and mtl files. It always says mtl file is missing. I'm using the online demo. Thanks.

Self-hosted viewers should detect size automatically based on the size of the container div

Reported by @mo8Zomo0:

• Instead of defined width and height it should use parent div's dimension so it is possible to make it fullscreen.
• It should react on resize, and align the viewer to the new size of the canvas.

Fail to open multiple files

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

Possibility to open * .ply files or convert them with vertex color

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

Support *pmd / *pmx format models.

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.

show off file

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.

Can't load 3ds file with multiple meshes

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 !

Pan with middle mouse

So it can work with a mouse with no right button.

Generate sharing link

STEP file import

Option to set default material for meshes with no material information

Zip exported files

In case of multiple exported files they should be downloadable in one zip file.

Option to embed camera position during embedding link creation

Define file urls as location hash - how?

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

save viewer camera position

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!

Create sharing link

glTF exporter

Make it possible to export any model to gltf and glb.

Use arcball for intuitive rotation

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.

How to calculate surface area and volume

How to calculate surface area and volume

Begin with a Default File

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.

Can't handle query parameters in urls?

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:

https://glcdn.githack.com/openflexure/openflexure-microscope/-/jobs/223115318/artifacts/raw/builds/main_body_LS65.stl

but not this which re-directs to the same file.

https://glcdn.githack.com/openflexure/openflexure-microscope/-/jobs/artifacts/master/raw/builds/main_body_LS65.stl?job=STLs

Is it because it doesn't ignore the query parameter ?job=STLs ?

Support dds and tga textures

Hello Viktor!

Do you plan to support textures in the future?

• dds: https://p3dm.ru/files/auto/tanks/14194-is-2.html
• tga: https://p3dm.ru/files/auto/tanks/13814-t-34-85.html

Upper limit of data size

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!

Multiple files

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!

[FR] Add measurement tool

First thank you for your project, it's very clean.
Is it possible to add a tool to make measurement on the model :

1. Measuring the length of an edge
2. The distance between 2 parallel faces
3. The angle between 2 faces/edge
4. (Optionally the surface for a polygon)

debug / texture issue

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?

Pan function

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! :)

I can't access to file relative to the root folder

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 :)

Use viewer to showcase files

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.

stp step and File volume

hello，Thank you very much for your team's excellent product.
Is our software support step ?
Can we calculate the volume of 3D files?

Export as png

Make it possible to export the current view as a png file.

Failed to open file. Maybe something is wrong with your file - File works when uploading through the interface, though?

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?

Dirty Context/Racing Condition when embedding 3d viewer

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! 👋

Embeddable mode not loading file with Firefox 68

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

Thank you very much !!! I have 1 question ?

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.