HTML5 3d/animation example how is it done?

[complexity]

Hi all,

Just wondering if someone could tell me what html 3d and animation technology is used to create an animation of the "5" seen here https://www.oculusconnect.com/

Obviously there is a 3d program, or some kind of animation tool for the figure 5, along with dynamic lighting with both responding to mouse movements.

Also when you scroll down the page there are these animated waves.

Just trying to learn and understand and would love to be able to create things like this in future.
Does adobe have tools to create this sort of thing?

Any help would be great

[pziecina]

There are a number of ways you can do this, with each requirering a different approach.

The first one would be to 'stack' a collection of images on top of each other, (with slight variations in position) then rotate them using css transforms, transitions and animations, (remembering to use the 'maintain 3d' property.

The second would be to use a 'psuedo' 3d tool to create the 5, such as those offered by photoshop, and again use the css transforms, etc, (mentioned above).

The third would be to use a 3d 'object' creation tool, (don't use adobes dimensions, but the free tool that comes with win 10 pro works) and again use the css properties mentioned.

The fourth way would be to use the 3d 'object' creation tool, then insert the 'object' into a webGL container and use javascript to rotate.

Another couple of possibilitys, (which I have never used) may be to try and do this with Adobe Animate CC. Or do it yourself using the html5 canvas element and a suitable js canvas animation framework.

[Nancy OShea]

Look at the source code.  There are 20 references to CSS and JS files for everything from layout and componenets to content and apps.   Also note the warninigs inside the <noscript> tag.  The site doesn't work without JS enabled.   The whole thing appears to be built on a JS framework.   Maybe B i r n o u​  could tell us which one. 

[B i r n o u · Accepted solution]

https://forums.adobe.com/people/Nancy+OShea  a écrit

Maybe https://forums.adobe.com/people/B+i+r+n+o+u   could tell us which one. 

well... while reading diagonally I saw this thread pass through.... and I saw your post... ... why ?

anyway, concerning the OP's post, that's a webgl javascript approach... you could start reading this link

https://developer.oculus.com/documentation/vrweb/latest/concepts/oculusbrowser-intro/

but there are plenty API out there as pixy, aframe, three.js, babylon.js, unity....  or find and test any other one... List of WebGL frameworks - Wikipedia

does this help ?

personnaly I'm not a specialist of 3d rendering anymore... the last project I was involved in 3D is fifteen years back using D8.5 and Realviz products.. very old

[complexity]

Thanks for all the answers everyone, interesting stuff will investigate further. Yes I could see all the JS references in the code but none of them made any sense to me. Used to be right into flash animation for the web ten years ago, but since flash got dropped I haven't really explored animation / 3d for website too much apart from basic SVG type animations, keep seeing these great examples and need to try and understand.