Skip to main content
C
complexity
Known Participant
September 9, 2018
Answered

HTML5 3d/animation example how is it done?

  • September 9, 2018
  • 2 replies
  • 2603 views

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

    This topic has been closed for replies.
    Correct answer B i r n o u

    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

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    September 9, 2018

    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. 

    Nancy O'Shea— Product User & Community Expert
    B i r n o u
    B i r n o uCorrect answer
    Legend
    September 10, 2018

    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

    C
    complexityAuthor
    Known Participant
    September 10, 2018

    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.

    pziecina
    pziecina
    Legend
    September 9, 2018

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices