Hi, I'm David Journeaux, a front-end developer and growing UX/UI designer. I've created this simple GitHub Pages site to hold a collection of minor projects I've worked on over the years.
To be frank, my most recent professional development and growth has occurred within two private endeavours:
- Building features for Shopify as one of their software engineers
- Creating prototypes for my own passion project, The Altered.
In light of this, I've not done much that reflects my current skillset within the public sphere. It's my hope this site will help to change that, presenting new, public projects that accurately demonstrate my expertise and learnings in development and user experience with time.
I hope you’ll appreciate and enjoy the journey as much as I intend to myself.
- Marble Race
- Animated Galaxy
- Scroll-based Animation
- 3D Physics
- Portal Scene
- Post-processing
- Raging Sea
View GitHub repo • View live demo • Requires keyboard to play • Best viewed in landscape orientation
TLDR:
A 3D marble race game made with Three.js and React Three Fiber.Tech used:
React•Three.js•React Three Fiber•React Three Rapier•react-postprocessing•Drei•Zustand•R3F-Perf•JavaScript•HTML•CSS
This project brings together many concepts of working with Three.js and React Three Fiber to create an in-browser game controlled by a keyboard.
It features a marble that can be directed via arrow and WASD keys. It can also jump with the space bar. The goal is to move as quickly as possible down a track with multiple, randomized obstacles.
When you first move, a timer begins. Upon reaching the end of the track, the timer stops and shows you your time. You can then restart to beat your previous record.
The work was undertaken as one of many steps in acquiring my Three.js certification through Three.js Journey.
Project image
Back to Table of Contents • Back to top
View GitHub repo • View live demo
TLDR:
A controllable, animated galaxy presented in 3D with hundreds of thousands of particles. Created with Three.js.Tech used:
Three.js•lil-gui•JavaScript•HTML•CSS
This project explores particle systems and animation in 3D. It also explores how to handle hundreds of thousands of particle instances in the browser. It was created with Three.js and React Three Fiber.
It features a whirling galaxy with distinct branches. The branches become more homogenous as the animation plays out. In the upper-right corner is a GUI that allows users to dynamically adjust multiple parameters for the scene, including colors, size, branches, and particle count.
The work was undertaken as one of many steps in acquiring my Three.js certification through Three.js Journey.
Project image
Back to Table of Contents • Back to top
View GitHub repo • View live demo • Best viewed in landscape orientation
TLDR:
A simple mock-portfolio front page with 3D animation triggered by scrolling. Made with Three.js.Tech used:
Three.js•lil-gui•JavaScript•HTML•CSS
This project explores scroll-based animation with 3D elements. It was created with Three.js.
It features a mock portfolio front page with floating 3D elements. The 3D elements will spin quickly in response to entering the viewport, and their position will adjust based on your mouse movement. In the upper-right corner is a GUI that allows users to dynamically adjust the color of the 3D elements.
The work was undertaken as one of many steps in acquiring my Three.js certification through Three.js Journey.
Project image
Back to Table of Contents • Back to top
View GitHub repo • View live demo
TLDR:
A chaotic 3D scene implementing physics using Three.js and React Three Fiber.Tech used:
React•Three.js•React Three Fiber•React Three Rapier•R3F-Perf•Drei•JavaScript•HTML•CSS
This project explores applying physics to a 3D scene created with Three.js and React Three Fiber. At its core, it features a spinning, rectangular block. Numerous models fall into the scene under the effects of gravity and are bounced around by the block, reacting as would be reasonably expected in the real world for their individual shapes.
The project also displays a performance monitor for profiling different performance indicators, such as FPS, memory usage, and GPU load.
The work was undertaken as one of many steps in acquiring my Three.js certification through Three.js Journey.
Project image
Back to Table of Contents • Back to top
View GitHub repo • View live demo
TLDR:
A low-poly 3D portal scene featuring custom animated shaders. Modeled in Blender, shaded and coded in Three.js and React Three Fiber.Tech used:
React•Three.js•React Three Fiber•WebGL•WebGL Shaders•Drei•JavaScript•HTML•CSS
This project explores writing custom animated shaders, building a scene in blender, baking lighting, and loading the scene in Three.js. The project also makes use of React Three Fiber.
The shader work is highlighted in the glowing and shifting patterns within the portal's stone circle. The scene features a low-poly 3D scene of a lantern-lit, fenced pathway leading through rocks and tree stumps to a mysterious stone portal. An axe rests in one of the stumps, and fireflies float against a black sky.
The work was undertaken as one of many steps in acquiring my Three.js certification through Three.js Journey.
Project image
Back to Table of Contents • Back to top
View GitHub repo • View live demo • Best viewed in landscape orientation
TLDR:
A simple 3D scene with a user-adjustable post-processing "drunk" effect. Created with Three.js and React Three Fiber.Tech used:
React•Three.js•React Three Fiber•react-postprocessing•Drei•Leva•R3F-Perf•JavaScript•HTML•CSS
This project explores post-processing in 3D, allowing users to dynamically adjust the intensity of an animated, drunken wave effect applied over top of a simple scene. It was created with Three.js and React Three Fiber.
It features a ball and cube on a green plane. In the upper-right corner is a GUI that allows users to adjust two parameters that affect the "drunk" view distortion: frequency and amplitude.
The project also displays a performance monitor for profiling different performance indicators, such as FPS, memory usage, and GPU load.
The work was undertaken as one of many steps in acquiring my Three.js certification through Three.js Journey.
Project image
Back to Table of Contents • Back to top
View GitHub repo • View live demo
TLDR:
A low-poly sea with rolling waves and dynamic user controls. Made with Three.js.Tech used:
Three.js•WebGL•WebGL Shaders•lil-gui•JavaScript•HTML•CSS
This project explores animating WebGL shaders and patterns. It was created with Three.js.
It features a low-poly sea with rolling waves. In the upper-right corner is a GUI that allows users to dynamically adjust multiple parameters for the scene, including wave elevation, frequency, and speed, small wave iterations, and sea colors.
The work was undertaken as one of many steps in acquiring my Three.js certification through Three.js Journey.
Project image
Back to Table of Contents • Back to top
View GitHub repo • View live demo • Best viewed on desktop
TLDR:
A quick and dirty prototype of a Google Model Viewer-based 3D model dimension extractor.Tech used:
Google Model Viewer•React•JavaScript•HTML•CSS
This project was a prototyping test explored as part of my 3D and AR/VR work with Shopify. It tested <model-viewer>'s getDimensions() method for performance viability in a project that required quickly assessing a model's dimensions to facilitate further business logic down the line.
The prototype mounts a <model-viewer> instance when a file is dropped on the UI's drop zone, and the <model-viewer>'s src attribute is set to an object URL of the model. The moment the model loads, getDimensions() is called and x, y, and z dimensions are displayed.
Included in the code is a call to console.time('getDimensions') that runs on file drop, and a console.endTime('getDimensions') call that runs once dimensions are set in state. The results can be viewed in the console tab of Dev Tools and used to help gauge the performance viability of using <model-viewer> to get dimensions from models of various file sizes.
UI was not a focus for this test.
Project image
Download a .glb file for testing
How to download
The link above will take you to a GitHub repository page where you can download a .glb file if you don't have your own for testing. The image below shows where you can find the download button on the linked repository page.
Back to Table of Contents • Back to top