kovacsv / Online3DViewer

A solution to visualize and explore 3D models in your browser.
https://3dviewer.net
MIT License
2.47k stars 543 forks source link

debug / texture issue #42

Closed mo8Zomo0 closed 3 years ago

mo8Zomo0 commented 3 years ago

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?

kovacsv commented 3 years ago

Hi mo8Zomo0,

From the code snippet it seems that you are using the old version of the library. Have you tried with the current version? Please check if it works with the new version by following the steps in this document: https://github.com/kovacsv/Online3DViewer/wiki/Use-the-Viewer-on-Your-Website

If it doesn't work it would be a big help if you could share the model and the exact code you use.

mo8Zomo0 commented 3 years ago

I am not sure how old "old" is, I based it on the github version like 1-2 weeks ago (50723d1). I used the same base and sample to do the page containing the auto loaded files. I see there is an update from yesterday and the new one 135e97f

mo8Zomo0 commented 3 years ago

side question, which type of file set (generated with metashape) would be the preferred one and are there easy ways to scale down the size (last is possibly more a metashape question)

kovacsv commented 3 years ago

The code was completely rewritten, and the new version was published one week ago (from version 0.7.0).

kovacsv commented 3 years ago

I don't know metashape's capabilites, but if you are looking for optimized size one of the binary formats is recommended. 3ds and glb can handle materials and textures.

mo8Zomo0 commented 3 years ago

@kovacsv thx!

Hmm, I was just looking at the new samples, is there one for what I am doing here, plain white background with the auto loaded 3d model and no options like loading other files.

kovacsv commented 3 years ago

Here is the documentation for that: https://github.com/kovacsv/Online3DViewer/wiki/Use-the-Viewer-on-Your-Website

Here is an example fully working page: https://github.com/kovacsv/Online3DViewer/blob/master/tools/sandbox/embed_selfhost.html

mo8Zomo0 commented 3 years ago

hmm, that docu and selfhost page includes
<script type="text/javascript" src="../../build/final/website/o3dv/o3dv.min.js"></script>

I can not find any file o3dv*.js

# find ../.. -iname "o3dv*"
../../3d/Online3DViewer/website/o3dv

only the directory

# ls Online3DViewer/website/o3dv
dialogs.js  embed.js  hashhandler.js  info.js  loader.js  menu.js  modal.js  modeldata.js  toolbar.js  treeview.js  utils.js  website.css  website.js
kovacsv commented 3 years ago

Please read the documentation, and use the files from the release instead of the sandbox: https://github.com/kovacsv/Online3DViewer/wiki/Use-the-Viewer-on-Your-Website

Downlad the latest version: https://github.com/kovacsv/Online3DViewer/releases/download/0.7.4/o3dv_0.7.4.zip

Use the downloaded files:

<script type="text/javascript" src="three.min-126.js"></script>
<script type="text/javascript" src="o3dv.min-0.7.4.js"></script>
mo8Zomo0 commented 3 years ago

ok, though would be handy if they would have been included in the git current git repository?

What I like on the new version is that it tells you about the state so you know whats going on (the old one just had a white page till something appeared).

What I noticed on the old one, even with width and hight present it used the full browser page (which I actually preferred) now it is limiting to the width and height and at least removing these did not seem to work at all and a 100% also did not work. Is there a way (I am directly accessing the web page) so that the model / canvas scales to the available bowser window size?

I found the error btw, as the new page behaved the same I looked closer at the files and I just saw that the obj and mtl file also contain the filenames. after fixing that it shows up as expected. (in the new version with the sizing limitations)

kovacsv commented 3 years ago

Yes, the final build is not part of the repository currently. The lack of full screen is really a limitation in the new version. I've created #43 about this.

mo8Zomo0 commented 3 years ago

It also seems to work on iphone/ipad (think the old one did not work). Yes, would be great to have that fixed!

Closing this as the issue was due to my wrong file names.

@kovacsv Thank you for your tool and quick help!