Skip to content
Submitted almost 3 years ago

Learning Three JS (3D)

Benja.min•740
@BenjaDotMin
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Clipboard landing page
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hello there! I spent the weekend learning Three JS in order to get 3D models in to the browser.

I selected a project and put my own spin on it, by taking the flat images and converting them to 3D models, so the design preview will not match up fully.

As you can see, I am not a 3D artist, but I do find it fun!

You can drag to rotate the models, zoom in with the mouse wheel, or pan with ctrl+left mouse. I do have an issue where the canvas will "Hijack" the page scroll event, which is very annoying when scrolling down. So if anyone has a workaround for this, please let me know :)

Thank you!

Community feedback

  • Ramz•375
    @Ramz001Posted almost 3 years ago

    Hello Benjamin Your project looks undeniable good but it's a bit laggy Overall pretty good

    Marked as helpful
    0
    Benja.min•740
    @BenjaDotMinPosted almost 3 years ago

    @Ramz001 AH thanks for the feedback, I guess its because I worked in isolation on my PC, which seemed to run it smoothly. But its a good point regarding testing on laptops etc.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord