THREE.js object and material loading

October 31, 2015

Messing with some THREE.js and on top of that the excellent webvr-starter-kit.

The WebVR starter kit is a library on top of Three.js that allows you to quickly and easily setup a scene without all of the coding required by Three.js.

VR.floor()

This will get you a basic scene with lighting, rendering, camera, and a checkered plane for a floor.

Since this is based on Three.js, you can then use typical Three.js libraries to do things like load objects and materials. Then you can add them to the existing scene like so:

VR.scene.add(whatever)

I wrote a basic example that utilizes Three’s OBJMTLLoader. You can see the source below and you can see it in action here.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Load Obj with Three.js</title>
  <meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="js/three.min.js"></script>
<script src="https://povdocs.github.io/webvr-starter-kit/build/vr.js"></script>

<script type="text/javascript" src="js/MTLLoader.js"></script>
<script type="text/javascript" src="js/OBJMTLLoader.js"></script>

<script type="text/javascript">

VR.floor()
console.log(VR) // this container things like VR.camera, VR.scene, VR.renderer from THREE

// this just
var manager = new THREE.LoadingManager()
manager.onProgress = function(item, loaded, total) {
  console.log('Manager:', item, loaded, total)
}

/**
 * objLocation should be the http location of the file without the extension.
 * we will automatically assume that an obj file and an mtl file are present.
 * ex: https://raw.githubusercontent.com/bitgridio/models/gh-pages/lullabot/Body
 */
var loadObjMtl = function(objLocation) {
  var loader = new THREE.OBJMTLLoader(manager)
  loader.load(
    objLocation + '.obj',
    objLocation + '.mtl',
    function(obj) {
      console.log(obj)
      VR.scene.add(obj)
    },
    function(xhr) {
      console.log(xhr.loaded + ' bytes loaded')
    },
    function(xhr) {
      console.log('Error loading object')
    }
  )
}

loadObjMtl('https://raw.githubusercontent.com/bitgridio/models/gh-pages/lullabot/Body')
loadObjMtl('https://raw.githubusercontent.com/bitgridio/models/gh-pages/lullabot/Headd')

</script>
</body>
</html>