3D models in JavaScript graphics

For all these demos, "View Source" to see the entire thing!

• 3D models

• script-tutorials.com has some tutorials on using 3D models in Three.js.
  • Search site.

---

Resources

• Search for Free 3D models (buildings, avatars, etc.)

• Resources on Ancient Brain

• SketchUp - make your own 3D models
  • How to export different file formats

---

OBJ models

• OBJ models

• three.js docs
  • OBJLoader

• threejs.org examples
  • OBJ Loader example
  • OBJ model of person is here: male02.obj.

---

Test of 3D OBJ model

(Painting each part with the same texture.)

• Test of 3D OBJ model
  • Camo texture from here.
  • Camera slowly orbits the avatar.

---

3D OBJ model examples

• Test of 3D OBJ model in motion
  • Can reference an avatar by name and move it.
  • Camera slowly orbits the stationary avatar.
  • The other avatar goes on random walks.

• Minimal test of 3D OBJ model in motion

• Test of mouse moving camera

---

Painting OBJ models

Painting each part separately. Use MTL file to go along with the OBJ file.

• OBJ plus MTL tutorial from script-tutorials.com
• Castle demo

• Files needed:
  • castle.obj
  • castle.mtl
  • rock.jpg
  • grass.jpg
  • metal.jpg
  • door.jpg

• This is a nice example (since it only requires 6 files) but it is the old way of loading OBJ and MTL (using OBJMTLLoader.js).
• For the new way of loading OBJ and MTL, see the following.

---

MTLLoader

• three.js docs
  • MTLLoader

• Stripped-down local copy of Castle demo using OBJLoader and MTLLoader

---

OBJ human

• "Peter Parker"

• Demo page of "Peter Parker"

• Uses DAE and TGA files. Needs TGALoader.

---

TGALoader

• three.js docs
  • TGALoader

ancientbrain.com      w2mind.org      humphrysfamilytree.com

On the Internet since 1987.      New 250 G VPS server.

Note: Links on this site to user-generated content like Wikipedia are highlighted in red as possibly unreliable. My view is that such links are highly useful but flawed.