THREE.js object and material loading

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>

Ello.co

I guess I should write something this year ;) Well, I have, but I’ve really been enjoying Ello.co as a writing platform lately, so if you’d like to read more, please visit there.

read on

AngularJS Posting Interface for your GitHub Jekyll Site

After getting a decent way to create a file on GitHub just using a POST from a form as Brock Boland spoke about with his Jekyll posting interface, I thought I would take this one step further and figure out a way to use the GitHub API to create that file instead of taking you to GitHub’s new file interface. This was much easier than I expected.

GitHub.js

I did a little searching for AngularJS and GitHub authentication and came across GitHub.js which (to my delight and surprise) is now being maintained by none other than my friends at DevelopmentSeed! This gives the browser a complete javascript library for working with the GitHub API and is simply perfect for the job.

I added a username and password field to my post interface and setup an AngularJS controller to utilize this library.

  var app = angular.module('app', ['app.filters']);

  app.controller('AuthCtrl', function($scope, $log) {
    $scope.username = '';
    $scope.password = '';
    $scope.success = false;
    $scope.auth = function() {
    
      $scope.github = new Github({
        username: $scope.username,
        password: $scope.password,
        auth: "basic"
      });
    }
  });

$scope.github now has access to all of the nifty functions that GitHub.js provides. You can see the full controller which uses the GitHub.getRepo and repo.write in order to create a new file in my _posts directory in markdown format with the appropriate YAML headers. GitHub then runs it through Jekyll and the result is what you’re reading now.


Updates

2013-09-08: I’ve since turned this into a full-fledged project called hublog-ng and taken Pascal Precht’s advice and incorporated his angular-github-adapter which taught me a bit about Angular’s promises feature.

Jekyll Juice

This blog is now powered by Jekyll alone (was on Octopress). Brock Boland recently wrote about moving his blog to only Jekyll and I’d been wanting to do this for a while as well so I don’t need to worry about generators and such at all. Only took about an hour. Generate a jekyll site with jekyll new [site] and then just move your posts over, tweak your settings and theme and you’re done.

read on

Best man's speech

On Sept 27th 2010 I was married to the love of my life, Jenney Marie Richards. My best man David Burns, wrote a speech that was both moving and heartfelt. I record that now for all eternity (assuming the internet is immortal and all):

read on