Project: 3D Viewer

3D Viewer | Project

3D Model viewing in your browser

View the browser model viewer for yourself! This is a project to test out some of the capabilities of Three.js, a JavaScript framework for displaying 3D content on the web harnessing the power of WebGL.

This application allows you view a simple 3D laptop and to change various settings. Change the background of the canvas to transparent, black, or white using the toggle buttons next to the background controller. Change the controls from mouse tracking, rotate, to click and drag with the toggle buttons. Note that the mouse tracking controls are only available on desktop. Finally, switch between perspective and orthographic views using the toggle buttons next to the view controls.

The laptop model was created in Blender and exported as a GLTF resource. This allows for fast loading on the web, even with textures and shading applied to an object.

Visit 3D Viewer application here

Three.js

Three.js

HTML

HTML

CSS

CSS

Javascript

Javascript

View Next Project