Loading a 3D Model with ThreeJS - 1

In this example you can see how 3D model can be loaded to WebGL using ThreeJS library. A low polygon model of a Motor Cycle is used here. The 3D mesh is in OBJ format and texture as TGA files.

To make this work, the scripts listed below are required: :

  1. OBJLoader - for loading .obj mesh
  2. MTLLoader - for loading .mtl material definitions
  3. TGALoader - for loading .tga textures

Sample model taken from : free3d.com

1
2
<!-- Target canvas -->
<canvas id="expCanvas" width="480" height="480"> </canvas>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
body{
margin : 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/**
* @author diode / https://vipin.link
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Share

Output