Fading Coder

One Final Commit for the Last Sprint

Building a 3D Smart Archive Room with Three.js: Path Planning and Automated Inspection

3D Scene Construction Facility Visualization The virtual environment includes the external campus, distinct floors, and the interior archive storage rooms. Floor are displayed using an exploded view technique to allow users to select specific levels. Double-clicking a floor navigates the camera into...

Building a 3D Smart Archive and Mobile Shelving System with Three.js

3D Archive Room VisualizationA 3D archive facility can be divided into multiple distinct zones and complex corner rooms. Within this environment, mobile shelving units (compact shelves) can be interacted with directly. Clicking a shelf unit displays its statistical data, including face count, tier c...

Integrating DOM Elements as 3D Objects in Three.js

HTML elements can be transformed into spatial objects, behaving similarly to standard Three.js meshes or sprites within a 3D environment. The fundamental distinction between a standard mesh and a sprite during scene rotation is that a sprite's rectangular plane continuously faces the camera, remaini...

Building a 3D Data Center with WebGL (Three.js) – Standard Room Edition

Introduction Data centers today are mainly divided in to two categories: standard data centers where cabinets are arranged in an XY grid, and micro-module data centers composed of grouped cabinets. This article focuses on the visual representation of a standard data center, allowing real-time 3D dat...

Building a Basic 3D Scene with Primitive Shapes in Three.js

A Three.js environment acts as a container for all 3D elements, including objects, lighting, and cameras. Initialize a new environment using the THREE.Scene() constructor. const environment = new THREE.Scene(); Renderer Setup The renderer handles the drawing of the 3D scene onto a canvas. Use THREE....

Rendering and Animating 3D Cubes with p5.js

To work with 3D geometries in p5.js, enable WebGL rendering by passing WEBGL to createCanvas(). The box() function generates cube geometries with configurable dimensions and subdivision levels. function setup() { createCanvas(400, 400, WEBGL); } function draw() { background(240); rotateX(PI / 6); ro...

Runtime 3D Geometry Construction with p5.js createModel

The createModel() function enables instantiation of p5.Geometry objects directly from textual mesh data, bypassing external file dependencies. Unlike loadModel() which fetches binary assets asynchronously from URLs, this method processes OBJ or STL formatted strings already present in memory—ideal f...