mrdoob/three.js — Issue #985: Can't figure out correct reference path to geometry within a Drupal module's context
Author: bsenftner
Created: 2011-12-30 02:55:38+00:00
State: open

Hello,

I'm trying to get three.js to operate within the Drupal CMS. This should be no big deal, but I'm having issues getting the JSONLoader to work.

Within the Drupal CMS, there is a defined directory structure where files are supposed to go. These files are organized into "modules" (like a Photoshop plugin), each containing the php, javascript, css and related files referenced by that module.

I have created such a module that generates 3d geometry, and I want to render that geometry using three.js.
You can see my three.js test page here: http://direct.cg-general-store.com/Auto-3D-Heads-three-test

From there you can "View Source" and see the rather complex crap that Drupal throws onto a page, but the key info you'll want is my logic referencing three.js. Note that the below logic renders the cylinder fine, but never executes the callback for having loaded the geometry. My comments show some of the path variants I've tried...

```js
// an after-the-DOM is loaded wrapper:
// $(function() { <- this is the jquery after-the-DOM style, while below is the Drupal method:
Drupal.behaviors.initCexFrontThree = function( context ) {

'use strict';	/*global Drupal:true */

// wrap everything in logic to wait for all loaded or whatever conditions:
var gDoEverything = function( context ) {

var camera, scene, renderer,
geometry, material, mesh, meshDrParr;

init();
animate();

function init() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
scene.add( camera );

/* load some pre-created geometry to I know this thing works

// geometry = new THREE.CubeGeometry( 200, 200, 200 );
geometry = new THREE.CylinderGeometry( 500, 500, 256, 32, 10, false );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true, shading: true } );

mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

/* load the actual geometry I care about */

var jsonLoader = new THREE.JSONLoader();

// this is the complete path to the desired file, which does not load for some reason...
// jsonLoader.load( { model: "http://direct.cg-general-store.com/sites/all/modules/custom/cex_front/Dr_Parr_three.js",
// callback: initMesh });

// Normally, a Drupal site can reference files like this, and they load fine, but here they do not...
// jsonLoader.load( { model: "/sites/all/modules/custom/cex_front/Dr_Parr_three.js",
// callback: initMesh });

// I have this javascript file in the same directory as my desired geometry, so by relative addressing, this should work but does not...
jsonLoader.load( { model: "Dr_Parr_three.js",
callback: initMesh
} );

renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );
}

function initMesh( geometry ) {
meshDrParr = new TRHEE.Mesh( geometry, new THREE.MeshFaceMaterial() );
scene.add( meshDrParr );
}

function animate() {
requestAnimationFrame( animate );
render();
}

function render() {
// mesh.rotation.x += 0.01;
// mesh.rotation.y += 0.02;

renderer.render( scene, camera );
}

}; // this is the end of the gDoEverything() function, which holds all our work logic

gDoEverything( context );

// this is the ending of the jquery wrapper insuring the DOM is loaded:
};
```

Any idea how to reference my geometry correctly?