pkthebud pkthebud - 4 months ago 7
Javascript Question

Most efficient way to get a Three.js project to work in a ruby on rails app?

I'm trying -unsuccessfully- to get a Three.js project to work within the Ruby on Rails framework

I keep thinking that there must be an easier way to do this than the way I'm doing it at the moment

First I googled for a guide/tutorial on how to port working Three.js code to rails and found very little on the subject. Which I figure means: either people don't do it very often -or- that it's so obvious that no one has bothered to document it.

Next
I googled for a three.js gem and found one here - http://rubygems.org/gems/threejs-rails
(which I gave up trying to get to work - after much messing around with the manifest file)

Next
I installed the source of Three.js into the vendors folder and messed around with the manifest file again. This time I had more success - although there seems to be dependency issues within Three.js that require_tree (and myself) are oblivious to.

So theoretically, I could probably get it to work after a several hours of figuring out the Three.js loading sequence, but this doesn't feel right.

I feel like I've gone down a blind alley here and I'm missing something obvious.


  • is there a better way to do this?


Answer

Rails is, primarily, a back end server side framework. Three.js is a front end library for rendering WebGL in a browser. They have little to do with each other. I think you're trying too hard.

The process is the same as adding something like jQuery, or any other javascript library.

  1. Drop the three.js file in app/assets/javascripts/three.js
  2. Add #= require three to your application.js.coffee
  3. Ensure that javascript_include_tag('application') is part of your application layout template

Now launch the server, load a page, and type THREE in the javascript console. If you get a return value, your good! Now write some custom javascript, save it in app/assets/javascripts and include it on the pages you want to do awesome 3D stuff.