Three.js Model Viewer

A 3D model viewer built using the Three.js library. The application is currently capable of loading .obj, .stl, .dae, .glTF & .FBX format models (both single files and ones with textures) and has various functions for viewing 3D models online.

3D Models Javascript Three.js

An application using the Three.js library to allow user to load model files and view them online with multiple viewing options.

Loading Models:

  • Choice of inputs, either load model or load model + textures
  • Models and textures can be dragged and dropped onto the viewer
  • Current formats supported: .obj or obj+mtl(and textures), .dae or dae (+textures), .stl, GLTF (+textures) and FBX (+textures)
  • If loading a model and textures, make sure the model file and texture files are in the same folder on your system

Features:

  • View sample models from dropdown list
  • View model information (name of model, number of vertices and faces)
  • Add ambient light and alter the colour
  • Alter the colour of the directional Ligt
  • View model in wireframe model and model+wireframe mode
  • Apply phong shading mode and increase/decrease the shininess level
  • View model in x-ray
  • Apply glow outline pass to the model and set the edge colour of the glow
  • Set background colour of the renderer
  • Auto-rotate the model and adjust the rotation speed
  • Add transform controls (when selected, press S:scale, T:translate and R:rotate)
  • Scale the model up and down
  • Add view helpers such as bounding box, square/circular grid underneath model and an axis

View the project online and/or see the gallery below for more functionality of the application.