Check out the live website! This is my "Tech Demo" assignment for CS732 at the University of Auckland.
ย
- Install Node.js; install VS Code (or any code-editing tool as you like)
- Clone this repository.
- Open your terminal and run command to install the necessary libraries
npm install --legacy-peer-deps
- Finally, launch website at your localhost.
npm run dev
It is necessary to set this flag --legacy-peer-deps
in order to work around mismatches between several libraries I use! If ERROR appears then run npm install
first and then run npm install --legacy-peer-deps
again.
ย
This website was built with React and several libraries for added functionality and aesthetics, including the use of WebGL for 3D objects.
Tools | Notes |
---|---|
Tailwind CSS | Popular utility-first CSS framework |
ThreeJS | An essential tool for any web development project that involves 3D graphics or animations. |
React-tilt | A lightweight library for creating interactive tilt effects. |
React-three-fiber | A React renderer for Three.js. Built specifically for integrating Three.js into React applications. |
React-three/drei | A collection of helpers to simplify the process of building 3D graphics and animations using the Three.js library |
Framer Motion | Animation and motion library for React that allows developers to easily create smooth and fluid animations with a declarative API. |
Maath | A collection of useful math helpers, random generators, bits and bobs. |
React Router DOM | Implement dynamic routing in a web app. |
WebGL | A JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. |
Tools | Notes |
---|---|
Blender | Edit 3D models and export GLTF/GLB file (GL Transmission Format/GL Binary file format) for WebGl |
Adobe Illustrator | Web design and svg files |
ย
It provides me with a set of pre-built UI components and responsive utility classes to build the site quickly without writing custom CSS.
I use various properties from Framer Motion to make this site a smooth browsing experience.
motion
is the object I mainly use in my website, it create motion-enabled versions of standard HTML elements so that it creates a div element that can be animated using the animate and transition properties from the library.variants
property is used to define a set of animation states for a container element.staggerContainer
function returns an object containing animation variants.whileInView
is set to 'show', which means the element will be animated when it comes into view.
My website uses ThreeJS and its related libraries to create and display 3D graphics in a web browser using WebGL. With Three.js, you can make various objects, such as meshes, lights, and cameras, and render them to display in the browser. Check my Donut.jsx file file for example:
- To create the illusion of movement, the computer needs to constantly update the position, rotation, and other properties of the donut so you need to create loops that update and render the donut each frame. My code uses
useFrame
hook from@react-three/fiber
library to create a loop that updates and renders the scene each frame. - In the
Donut
component,useFrame
hook updates the rotation of the donut model based on the elapsed time. - In the
DonutCanvas
component, theCanvas
component from@react-three/fiber
is set up with theframeloop
prop set to "demand", which creates a loop that updates and renders the scene each frame when needed.
I used this library to add light and camera so that they work together to illuminate the donut.
- Use
Canvas
anduseFrame
components to produce the 3D canvas and handle rendering. - The
hemisphereLight
component is used to create a light that is positioned directly above the scene and shines down from all directions. - The
spotLight
component is used to create a focused light that shines in a specific direction and casts a shadow. - The
pointLight
component is used to create a point light that illuminates the scene evenly in all directions.
This is what the 3D donut looks like with no light, only hemisphere light and full lights on it.
useGLTF
hook allows loading 3D models in the glTF format, and accessing them as Three.js objects. It allows you to load this donut!OrbitControls
component provides camera controls for the donut, allowing you to orbit this donut using the mouse!Preload
shows a fallback UI while the donut is being loaded, which can help to avoid rendering delays during the loading process and improve performance!Points
andPointMaterial
in Stars.jsx file are used to create a set of points that represent stars in the background. The background of my website is a 3D scene!
This package use older version of React, but it has cool animation features. Therefore when installing packages, you need to add --legacy-peer-deps
flag just for it.
Tilt
is used to customize the 3D tilt effect on the card!
I use the maath library (maath/random to be specific) for generating a set of random points as stars in the background.