Three.JS 3D model Viewer

2 5 2 5
0 9 1 0
1 2 0 3
5 0 d c

I refined my Three.js integration of the basic 3D viewer. In this step I implemented a completely new GUI using scalable SVG graphics and custom sliders, added the option to render models in wireframe mode, and introduced a pixelation effect for stylized rendering. At the same time, I removed the bloom effect due to alpha blending issues. I also substituted the standard Three.js OutlinePass with a lightweight custom MinimalOutlinePass shader that can generate dark outlines. This way the 3D viewer became both more functional and more visually consistent.

GITHUB Repository Link

Integration

Loading model...

|

Polygons: 0

A nice Three.js 3D model viewer with a custom outlinepass shader

Change Log

[2025 | 10 | 03]

Substituted the standard OutlinePass shader with a custom MinimalOutlinePass shader that can display dark outlines.
Added GUI controls for MinimalOutlinePass shader.
Setup of GitHub Repo.

[2025 | 09 | 30]

Implemented a completely new GUI with SVG graphics, custom sliders.
Added wireframe rendering mode.
Removed bloom feature because of alpha issue on camvas background.
Refined OutLinePath settings.
Added pixelization effect.

[2025 | 09 | 14]

Added ground plane + 3rd directional light + color picker for lights + standard overlay GUI + model dropdown menu.
Removed auto model rotation; sliders for light orientation and vectors for light orientation.

[2025 | 09 | 13]

Added outlines via OutlinePass + sliders for light orientation + slider for light and bloom intensity.
Added vectors for light orientation.

[2025 | 09 | 12]

Successful Integration + added bloom and model rotation + polygon counter and model path.