3D Visualizer - Help

Im looking into creating a 3d map similar in concept to the one shown here visualizing a building layout.

The only tool i could find was 3dwayfinder.com but its lacking in quality.
Anyone knows of any online tool that can offer that?

there are tons of librairies for 3D maps and objects. I couldn’t identify the one used in your example.

Here are some : http://blog.webkid.io/3d-map-library-roundup/

If you have the budget, a 3D dev with Unity can export a WebGL map and there you can set all the details you want: motion, render style etc…

1 Like

Layers of transparent png, e.g.:

Animated using custom JS:

opacity: 1;
transform-origin: 32.2% 48.7% 0px;
transform: rotateZ(0deg);
transition: opacity 1600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms, -webkit-transform 1600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;

Hi @vincent

Thanks.
In that case, a simple model can be built in Sketchup and then exported to Unity for animations and camera movements.
Ill see if i can make it work and then upload a tutorial with some downloadable files.

Hi @samliew

Thank you.
Can you turn this into a real progress loader?

Why not? If you have 10 layers, you can treat each layer as 10% which makes it easy to calculate.

@samliew

Can you share the code on how to do that? For a real progress loader?

I do not have any ready-made code on hand to share, but theoretically it is possible to code such functionality. You might want to look into these plugins first. If you get stuck with implementing it, then show us what you have put together, and perhaps we can see what you did wrong.

http://stackoverflow.com/q/18981909/584192

As for the custom CSS animation layers, it all depends on how you want it to look like. There is no ready-made script for that, so once you have the design ready, you have to communicate to your programmer how you need it made. Here is something I did recently for example http://heeton.webflow.io/progress-loader

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