Code a Web Virtual Tour in Javascript with the open-source Library Three.js

[@NITian_CK]

heyyyy brooo!!!
why it is showing error as "ReferenceError: PerspectiveCamera is not defined "

[@opensourceforarchitects]

Hey,
You have to import in it at the start of the document, either with :
import {...PerspectiveCamera...} from 'three';
or
import * as THREE form 'three';
with this, call it then THREE.PerspectiveCamera

[@razern420]

@@opensourceforarchitects Can u maybe share the code to just load the 3d model? in vs cuz im also an architect trying to figure out programming atm

[@mubzy4706]

do u have the github to the all of this code with the model?

[@opensourceforarchitects]

Not yet, sorry

[@djames5713]

@opensourceforarchitects I am building 360 capture, have gotten far but a few bugs/hurdles. You have a DM or contact link for a more in-depth discussion? And besides creating a viewer, do you have a method to capture from a camera, before ability to preview in three.js?

[@opensourceforarchitects]

Sure you can send an email at [e-mail]. You can build a hdri in Meshroom or even direclty on the phone with Google Street View app. Then you can build a three.js scene just with the hdri whitout loading any object

[@vatsalpandya2871]

can you please create an video in which we use panorama and change the color of wall or texture of wall with custom image upload or change from available existing options from the dropdown with on click method ? or please share if any reference example available for this

[@opensourceforarchitects]

Thanks for the suggestions.
Yes, it is possible with three.js to let a user change the material of an object.
It is also possible to change hdri (panoramas) but it has some limitations : it is suggested to bake the lighting and shadows produced by an hdri (eg in Blender) to avoid having it calculated by three on the user's machine

[@liuksataka759]

Awasome video! Was the 3d model reconstruction made by using neural radiance fields?

[@opensourceforarchitects]

Thank you! No, it's classic 3D laser scanning combined with photogrammetry

[@HuynhLuong227]

please share your code , thank you

[@naveed_snr]

I see a black screen when I load the model.

[@opensourceforarchitects]

you can inspect the page, then in console get what specific error you have

[@naveed_snr]

@@opensourceforarchitects Thanks for replying, I tried from scratch again and it worked. I later followed the same steps for another example (fps example) and it worked, but when I try to replace the model in the fps example with some other models they won't load. The two models that loaded properly were less than 10mb in size. How can I fix this issue? Thanks in advance : )

[@opensourceforarchitects]

@@naveed_snryou're welcome! Size shouldn't be a problem. Maybe it's the file format? .gltf and .glb work with the same code, but it has to match your file

[@naveed_snr]

@@opensourceforarchitects Yes, I made sure file paths and names are correct and the files were indeed of .glb format. Idk what was wrong so instead of using the code from the template, I wrote everything from scratch and it worked. Thanks to you I was able to understand whatever I was writing, which otherwise wouldn't have been the case : )

[@opensourceforarchitects]

@@naveed_snrok great! you're welcome, happy it worked out

[@emmanuelsamuel1434]

you didn't put a source code in description

[@avinashjha7848]

Thankyou for this video

[@ankurkumarsrivastava6958]

code?

[@HuynhLuong227]

🎉🎉🎉 wow so cool

[@deepakjamra5502]

❤