Orbiting photos

Hi Everyone, I´m architect and architectural visulizer for more than 20 years. I did always like software developement and few years a go I have started to do my first steps on coding.

I want to develop this project, basically is as the example bellow, but with buildings and floorplans, beeing able to have hotspots to link to animations or still images or even information about the architectural project.
Idea is to develop everthing with React and Threejs


You will ask why you need renders and you dont optimize and export the geometry to three.js, …well in archviz the geometies are quite dense, and optimizing will be a huge and tedious proccess, basically to do optimize something you need to do twice. So i came with this idea of render sequences of frames and update them on the web environment. I would be and old school method but quality and poligons will not be compromised here to render on the web environment but yest to load the images
For the hotspots i was thinking on a basic geometry rotating the same angle as the perspective of the photo.

My concern are loading time of photos and to have and idea if this is possible!
If someone can give me some hints on how to approach the project or some examples it would be much appreciated!

Other potential similar example:

Thank you in advance!

Out of curiosity, how many triangles are in the files and what size of building are you visualizing for this idea?

If the complete building is to appear on the page like the Vespa, with the camera outside the building, losing tiny details should be okay and a preprocess to automatically decimate the triangle count should work. Even if you decide to pre-render everything offline, reducing the triangle count will speed it up a lot. I can’t tell from your post if you have already tried automatic decimation or not, but it’s generally pretty good at removing the least important details first and is worth trying. I you do decide to pre-render the frames, the result will be roughly equivalent in size to a short video.

1 Like

Hi @ccammack First of all thanks for the response!

Decimate is a good option when you have a hires mesh on one object, but honestly archviz is a mess of stuff, basically what we do is a kitbash of elements and mateiralas over the main architecture geometry, that could be decimated but honestly would not be the main problem. On the other hand you have displacement maps that are evaluated on the render stage and all that detail is lost, for example on a brick or concrete facade.
The sequence yes depending on compresion would be that size or should

Cheers, Pato

It sounds like you need to use some other offline tool to render a single orbit around the building and save it as a video, along with the camera and path info used to render. You can use a low frame rate to save space if needed. Then, display the video on your webpage using the video tag and let the user scrub a range slider back and forth to see the building. Your idea to use an invisible low-polygon building model with points of interest attached is a good one for the other parts. Since you know the start and stop of the orbit used to generate the video, you can reproduce that same rotation with the low-poly model in three and detect collision with the points of interest and the mouse. I think something like that would work, but you’ll need to experiment with each part to see.

1 Like

Hi @ccammack thank you for your answer!

The rendering part i have it solved! i build a system on Blender that does that automatically.
Basically the setup is a sphere and you can configure the density of points to have more or less frames.
Now that im describing this, maybe i can associate an image with a dummy angle and every time the dummy is on that possition of the sphere is equivalent to a ‘frame’ or something like that.

Cheers, and thanks again for your thoughts!

1 Like