dvdjrnx / portal-scene

A low-poly 3D portal scene featuring custom animated shaders. Modeled in Blender, shaded and coded in Three.js and React Three Fiber.

Home Page:https://dvdjrnx.github.io/portal-scene/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Portal Scene

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.

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.

Live demo

A running demo of the project can be viewed at https://dvdjrnx.github.io/portal-scene

Local development

Installation

  1. Clone the repository.
  2. Install the required dependencies by running npm install.

Usage

To start the project, run the following command:

npm run dev

About

A low-poly 3D portal scene featuring custom animated shaders. Modeled in Blender, shaded and coded in Three.js and React Three Fiber.

https://dvdjrnx.github.io/portal-scene/


Languages

Language:JavaScript 87.3%Language:HTML 10.9%Language:CSS 1.8%