Tag: Three.js

  • 3D model animation in react-three-fiber

    ·
    # # #

    I wanted to add an animated propeller to my submarine and thought it would be a good time to go through a basic model animation and also add some interactivity based on user input. Animating the propeller when a user presses the arrow up key is what I was going for. I started with updating…

  • Loading textures for 3D models in react-three-fiber

    ·
    # # #

    Last time I used a hdri file to render an underwater environment. The next thing I wanted to learn was how to give my submarine model different textures. Looking at the react-three-fiber docs on loading textures I see that I can use TextureLoader with useTexture. Loading a metal texture for the submarine I grabbed a…

  • 3D scene environments using @react-three/drei

    ·
    # # # #

    Moving on after Loading and manipulating a 3D model in react-three-fiber, I wanted to give my submarine an underwater environment. I used drei’s Environment component to start playing around with a few presets to get used to things. Make the submarine appear in an ocean environment For this, I bought an underwater HDRI scene, added…

  • Loading and manipulating a 3D model in react-three-fiber

    ·
    # # #

    Once I kicked the react-three-fiber tires it was time to start learning how to render 3D models in the project I started this week. I wanted to use a free submarine model I got from Turbo Squid. I just downloaded the .blend file and opened it in Blender, then File > Export > gITF 2.0.…

  • Three.js and React with react-three-fiber

    ·
    # # #

    This week I got back into learning three.js and wanted to integrate with my favorite frontend UI library. The goal was to build a simple react app that changes the color of a cube. The requirements were to use React and Three.js together. I found react-three-fiber, a react renderer for three.js. That was all I…

  • Color Basics in Three.js

    ·
    # # # #

    A few weeks back I wanted to dig into learning WebGL with Three.js and started poking through the site to see if I could start with an example to get things rolling. I found this creating a scene introduction in the docs and decided to start there. After seeing how to create and render a…