Can i embed a 3 model in my home page?

WebODM
#1

Can i embed the 3 model, in a home page?

1 Like
#2

Yes, click on the share button and use the iframe html code.
Important: Will only work if your webodm has a working https connection with the correct certificat.

./webodm.sh restart --ssl --hostname yourdomain.org --port 443

1 Like
#3

Welcome!

Another option might be to use the PoTree library we use to render it directly on your website:

1 Like
#4

I might need some help about what to do after attempting to follow instructions in that link, on the way to being able to view 3D images on my website. The install ended with this

[40f0:000f][2022-02-03T15:34:51] Decorating UnelevatedProductModifier with UnelevatedInstallerTelemetryDecorator
[40f0:000f][2022-02-03T15:34:51] Created a UnelevatedInstallerTelemetryDecorator

( ME: IT SAT HERE FOR AGES WITH NOTHING HAPPENING)

Chocolatey timed out waiting for the command to finish. The timeout
specified (or the default value) was ā€˜2700ā€™ seconds. Perhaps try a
higher --execution-timeout? See choco -h for details.
visualstudio2019-workload-vctools may be able to be automatically uninstalled.
The upgrade of visualstudio2019-workload-vctools was NOT successful.
Error while running ā€˜C:\ProgramData\chocolatey\lib\visualstudio2019-workload-vctools\tools\ChocolateyInstall.ps1ā€™.
See log for details.

Chocolatey upgraded 16/17 packages. 1 packages failed.
See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).

Upgraded:

  • chocolatey-dotnetfx.extension v1.0.1
  • kb3033929 v1.0.5
  • visualstudio2019buildtools v16.11.9.0
  • python3 v3.10.2
  • chocolatey-windowsupdate.extension v1.0.4
  • vcredist140 v14.30.30708
  • kb2999226 v1.0.20181019
  • visualstudio-installer v2.0.2
  • kb2919355 v1.0.20160915
  • chocolatey-core.extension v1.3.5.1
  • kb2919442 v1.0.20160915
  • chocolatey-visualstudio.extension v1.10.0
  • vcredist2015 v14.0.24215.20170201
  • dotnetfx v4.8.0.20190930
  • kb3035131 v1.0.3
  • python v3.10.2

Packages requiring reboot:

  • vcredist140 (exit code 3010)

The recent package changes indicate a reboot is necessary.
Please reboot at your earliest convenience.

Failures

  • visualstudio2019-workload-vctools (exited -1) - Error while running ā€˜C:\ProgramData\chocolatey\lib\visualstudio2019-workload-vctools\tools\ChocolateyInstall.ps1ā€™.
    See log for details.
    Type ENTER to exit: ENTER
    ENTER

Should I reboot as it suggests near the end, or try to install ā€˜visualstudio2019-workload-vctoolsā€™
I found this: https://aka.ms/vs/17/release/vs_BuildTools.exe

However, it says: Use of this tool requires a valid Visual Studio license.
which I donā€™t have.

Suggestions as to how to proceed welcome! :slight_smile:

EDIT: in the Windows start menu I expanded the list and saw Visual Studio installer there, so clicked it, which opened a window where I spotted a ā€œRESUMEā€ button, which appears to be what I needed, as the download is proceeding now, albeit rather slowly!

Dodgy internet doesnā€™t help when downloading big files!

1 Like
#5

OK now that I have sorted the visual studio download issue out, Iā€™m now totally out of my depth, it is not going well, clearly the instructions are for people who know what they are doing! Iā€™m just getting lots of errors.

from - https://github.com/potree/potree#readme

Install node.js DONE

Install dependencies, as specified in package.json, and create a build in ./build/potree.

npm install

Run on your PC

Use the npm start command

C:\Program Files\nodejs>npm install

npm notice
npm notice New minor version of npm available! 8.3.1 ā†’ 8.4.0
npm notice Changelog: Release v8.4.0 Ā· npm/cli Ā· GitHub
npm notice Run npm install -g [email protected] to update!
npm notice
npm ERR! code EPERM
npm ERR! syscall mkdir
npm ERR! path C:\Program Files\nodejs\node_modules.npm-QXjMEw5N
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, mkdir ā€˜C:\Program Files\nodejs\node_modules.npm-QXjMEw5Nā€™
npm ERR! [Error: EPERM: operation not permitted, mkdir ā€˜C:\Program Files\nodejs\node_modules.npm-QXjMEw5Nā€™] {
npm ERR! errno: -4048,
npm ERR! code: ā€˜EPERMā€™,
npm ERR! syscall: ā€˜mkdirā€™,
npm ERR! path: ā€˜C:\Program Files\nodejs\node_modules\.npm-QXjMEw5Nā€™
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! Itā€™s possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\OTT Drones\AppData\Local\npm-cache_logs\2022-02-03T07_50_43_539Z-debug-0.log

C:\Program Files\nodejs>npm install -g [email protected]

added 2 packages, and audited 39 packages in 7s

1 moderate severity vulnerability

To address all issues, run:
npm audit fix

Run npm audit for details.

C:\Program Files\nodejs>npm audit fix

npm ERR! code ENOLOCK
npm ERR! audit This command requires an existing lockfile.
npm ERR! audit Try creating one first with: npm i --package-lock-only
npm ERR! audit Original error: loadVirtual requires existing shrinkwrap file

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\OTT Drones\AppData\Local\npm-cache_logs\2022-02-03T07_53_22_187Z-debug-0.log

C:\Program Files\nodejs>npm i --package-lock-only

npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path C:\Program Files\nodejs\package-lock.json
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, open ā€˜C:\Program Files\nodejs\package-lock.jsonā€™
npm ERR! [Error: EPERM: operation not permitted, open ā€˜C:\Program Files\nodejs\package-lock.jsonā€™] {
npm ERR! errno: -4048,
npm ERR! code: ā€˜EPERMā€™,
npm ERR! syscall: ā€˜openā€™,
npm ERR! path: ā€˜C:\Program Files\nodejs\package-lock.jsonā€™
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! Itā€™s possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\OTT Drones\AppData\Local\npm-cache_logs\2022-02-03T07_54_00_944Z-debug-0.log

npm ERR!s all the way, even though I was typing what was specified.

1 Like
#6

you can use https://www.pointbox.xyz with some limitations

2 Likes
#7

It appears that some of the errors Iā€™m seeing are due to no package.json file being present in the \nodejs folder.
However, there are files with that name in the 2 subfolders, \corepack and \npm

The version of the file in \npm is significantly larger, but I donā€™t know what either of them do. Since npm start is looking for package.json in \nodejs, but that file not existing there, can I use a file from the subdirectory, or will that just make a bigger mess of things?

npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open ā€˜C:\Program Files\nodejs\package.jsonā€™
npm ERR! enoent This is related to npm not being able to find a file.

1 Like
#8

I wouldnā€™t move stuff like that, haha. NPM should, in theory, be managing these packages for you, but if that was the case there wouldnā€™t be so much internet strife about NPM being a nightmare :stuck_out_tongue:

I guess you can try, nuke the directory if it fails, and try agin?

1 Like
#9

It failed. I wonder if anyone has actually succeeded in making it work, given that they havenā€™t supplied the required file to make it work?
Iā€™ll have to see if I can find the missing file online somewhere.

1 Like
#10

Does this guide provide any progress?
https://resources.weboffice.vertigis.com/documentation/weboffice109/en/howto_add_potree.htm

1 Like
#11

Thanks, Iā€™ll have a read through it, but after wasting too much time on it already I think Iā€™ll skip trying to make it work on my computer, since I can use Potree to view my 3D models within WebODM, or view with Meshalb :slight_smile:

For now I think Iā€™ll see if I can figure out how to view 3D on my web page.

1 Like
#12

I wonder if ThreeJS exported via QGIS might be an easier path, since PoTree is built upon ThreeJSā€¦

This plugin should export everything ready to drop in, from what I understand. Only played with it a little bit a long while ago:
https://qgis2threejs.readthedocs.io/en/docs/

1 Like
#13

I was thinking the same thing, a full tutorial is hereā€¦

2 Likes
#14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.