We Keep Coding

boundingSphere is null - TextGeometry, ThreeJS

I'm new at ThreeJS and trying to learn so I have basically create a text which is rendered 3D and I'm using TextGeometry and I need that object's size like width/height to always center the object.
I'm trying like this;
var objToCenter = scene.getObjectById(textGeoID);
var hey = objToCenter.geometry.boundingSphere.center.x;
console.log(hey);
First, I find the object and then assign boundingSphere.center.x value to new variable.
But I get "boundingSphere is null" error.
When I try to console.log objectToCenter, object is there and also boundingSphere is NOT null but when I try objectToCenter.boundingSphere it says null.
And interestingly when I go console and write these lines it works perfectly.
My full Code: (somehow fontloader not load the font from source url but it works in localhost,so pls try code in localhost or you can't see the text here)
// Scene, Camera, Renderer, GUI
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer( { antialias:true } );
var gui = new dat.GUI({name: 'Control Panel'});
// Renderer and Camera Settings
renderer.setSize( window.innerWidth, window.innerHeight-4 );
renderer.shadowMap.enabled = false;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild( renderer.domElement );
camera.position.set( 10, 10, 500 );
// Axiss Helper and Orbit Controls
var axesHelper = new THREE.AxesHelper( 500 );
scene.add( axesHelper );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
// Variables for TextGeometry
var textData = {
text: "Yunus Emre Uzun",
size: 40,
height: 5,
curveSegments: 12,
font: "helvetiker",
weight: "regular",
bevelEnabled: false,
bevelThickness: 1,
bevelSize: 0.5,
bevelOffset: 0.0,
bevelSegments: 3
};
var textGeoID = null;
function generateTextGeometry() {
if (textGeoID!=null) {
console.log('ID: ' + textGeoID);
var object = scene.getObjectById(textGeoID);
//console.log('Object:');
//console.log(object);
object.geometry.dispose();
scene.remove(object);
}
var loader = new THREE.FontLoader();
loader.load( 'https://clofro.com/cdn/fonts/helvetiker_regular.typeface.json', function ( font ) {
var textGeometry = new THREE.TextGeometry( textData.text, {
font: font,
size: textData.size,
height: textData.height,
curveSegments: textData.curveSegments,
bevelEnabled: textData.bevelEnabled,
bevelThickness: textData.bevelThickness,
bevelSize: textData.bevelSize,
bevelOffset: textData.bevelOffset,
bevelSegments: textData.bevelSegments
} );
var textMaterial = new THREE.MeshBasicMaterial( { color: 0x444444, wireframe: true } );
var meshedObject = new THREE.Mesh( textGeometry, textMaterial );
meshedObject.position.set(-212, -15, 20 /* 15 */);
scene.add(meshedObject);
textGeoID = meshedObject.id;
centerTheText();
} );
}
function centerTheText() {
var objToCenter = scene.getObjectById(textGeoID);
console.log('Object bellow is objToCenter and its id is: ' + objToCenter.id);
console.log(objToCenter);
console.log('Error bellow is for: objToCenter.geometry.boundingSphere.center.x');
var hey = objToCenter.geometry.boundingSphere.center.x;
console.log(hey);
}
generateTextGeometry();
gui.add(textData, 'text').onChange(generateTextGeometry);
gui.add(textData, 'size', 5, 100).onChange(generateTextGeometry);
// Add Point Light
var pointLight = new THREE.PointLight(0xffffff, 0.3); pointLight.position.set(50, 0, 150);
pointLight.castShadow = true;
pointLight.shadow.mapSize.width = 2048;
pointLight.shadow.mapSize.height = 2048;
scene.add(pointLight);
// Random colors
//pointLight.color.setHSL(Math.random(), 1, 0.5);
// Add Ambiant Light - halogen ambient light
var ambientLight = new THREE.AmbientLight(0xFFF1E0, 0.4);
scene.add(ambientLight);
var width = 450;
var height = 60;
var intensity = 0.8;
var rectLight = new THREE.RectAreaLight( 0xff0000, intensity, width, height );
rectLight.position.set( 0, 0, 14 );
rectLight.rotation.y = 6.28;
rectLight.lookAt( 0,0,0 );
scene.add( rectLight )
gui.add(rectLight, 'intensity', 0,5);
rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
rectLight.add( rectLightHelper );
// Create BackBox Shape
var backBoxGeo = new THREE.BoxGeometry(500, 75, 10);
// Create BackBox Material, color, texture
var backBoxMat = new THREE.MeshStandardMaterial( { color: 0xdaf1f9, wireframe: false, flatShading: false } );
var backBox = new THREE.Mesh( backBoxGeo, backBoxMat );
backBox.receiveShadow = true;
scene.add(backBox);
backBox.position.set(0, 0, 0);
// Resize Renderer Function
window.addEventListener('resize', function() {
renderer.setSize( window.innerWidth, window.innerHeight-4 );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
// Update scene
var update = function() {
controls.update();
};
// Draw scene
var render = function() {
renderer.render( scene, camera );
};
// Frame loop (update, render, repeat)
var frameLoop = function() {
requestAnimationFrame( frameLoop );
update();
render();
}
frameLoop();
* {
margin: 0;
padding: 0;
}
body { background-color: #000; }
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>threeJS</title>
</head>
<body>
<script src="https://clofro.com/cdn/three.js"></script>
<script src="https://clofro.com/cdn/dat.gui.min.js"></script>
<script src="https://clofro.com/cdn/OrbitControls.js"></script>
</body>
</html>
My explanations with SS;
Screenshot 1:
Screenshot 2:
Why it could be happening? or can I use something else to center my text.
(set position not a fix because 0,0,0 is different for box objects and texts)

When you create an instance of TextGeometry, the respective bounding sphere is not available yet. However, it is automatically computed by the renderer for view frustum culling.
So if you have to access the bounding sphere of the geometry right after its creation, call objToCenter.geometry.computeBoundingSphere();.
Live Demo: https://jsfiddle.net/zcn2tpqy/
three.js R107

I know this is too old to answer, but I just want to share my solution here.
First, I just added this code:
geometry.computeBoundingSphere()
Then, access the boundingSphere like so:
geometry.boundingSphere
Overall code
geometry.computeBoundingSphere()
console.log(geometry.boundingSphere.radius)

Three.js unexpected render result?

Created the following mesh in blender:
Whenever I load it into three.js I receive the following result:
I export to .obj format and triangulate all of my faces. Not sure why this is happening. Below is the threejs code I am using to render the mesh. I use the same code with other meshes and they render as expected. I'm guessing I've done something that three.js doesn't like with this mesh?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="/js/three.js"></script>
<script type="text/javascript" src="/js/DDSLoader.js"></script>
<script type="text/javascript" src="/js/MTLLoader.js"></script>
<script type="text/javascript" src="/js/OBJLoader.js"></script>
<script type="text/javascript" src="/js/OrbitControls.js"></script>
<script type="text/javascript" src="/js/stats.js"></script>
<script type="text/javascript" src="/js/dat.gui.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
function init() {
var stats = initStats();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 130;
camera.position.y = 40;
camera.position.z = 50;
camera.lookAt(scene.position);
scene.add(camera);
// create a render and set the size
var webGLRenderer = new THREE.WebGLRenderer();
//webGLRenderer.setPixelRatio( window.devicePixelRatio );
webGLRenderer.setClearColor(new THREE.Color(0xffffff, 1.0));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
var ambient = new THREE.AmbientLight( 0x444444 );
ambient.intensity = 5;
scene.add( ambient );
if('stiletto_switchblade_knife.mtl' !== ''){
THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl( '/assets/download/mesh/18/' );
mtlLoader.setPath( '/assets/download/mesh/18/' );
mtlLoader.load( 'stiletto_switchblade_knife.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( '/assets/download/mesh/18/' );
objLoader.load( 'stiletto_switchblade_knife.obj', function ( object ) {
//object.scale.set(100, 100, 100);
//object.rotation.x = -0.3;
scene.add( object );
});
});
} else {
var objLoader = new THREE.OBJLoader();
objLoader.setPath( '/assets/download/mesh/18/' );
objLoader.load( 'stiletto_switchblade_knife.obj', function ( object ) {
object.material = new THREE.MeshLambertMaterial({color: 0xFFFFFF});
//object.scale.set(100, 100, 100);
//object.rotation.x = -0.3;
scene.add( object );
});
}
// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
var controls = new THREE.OrbitControls(camera, webGLRenderer.domElement );
render();
// simple render
function render() {
stats.update();
controls.update();
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
}
window.onload = init;
</script>
</body>
</html>
EDIT
Are meshes required to be watertight in three.js? If so that could be the problem as there are a couple areas that are not in this mesh. That's the only thing I can think of at the moment that differs between this and the meshes that render properly.

Renders like that turned up with OBJ models in three.js R76. It turned out that any object containing a stray "l" (line) element blew up just like what you have shown. I found the bad objects by searching the ASCII OBJ file on "l ", got rid of the strays by selecting and hiding all of the faces, and dealing with whatever was left.

Solved. Turned out I had left a few faces drawn inside of the mesh. This was causing the unexpected behavior. Interesting debugging method. I just started stripping away vertices and rendering with threejs until I found the section that was causing the issue.

Three.js: geometry.addEventListener is not a function

I've been messing around with Threejs trying to get my sea legs, but I've run into a problem long before I expected to and I can't figure out if there's a mistake in my code or a mistake in the framework (I assume it's mine).
I want to replace an object with another when a button is pressed. My test code (below) loads a cube on the initial load, and I was hoping to replace it with a sphere when a button is pressed. However, that's not happening, and instead I'm getting the error:
TypeError: geometry.addEventListener is not a function
geometry.addEventListener( 'dispose', onGeometryDispose );
My html:
<!doctype html>
<html lang="en">
<head>
<title>My test</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
<script src="OrbitControls.js"></script>
<script>
var WIDTH = 500,
HEIGHT = 500;
var scene = new THREE.Scene();
var aspect = WIDTH / HEIGHT;
var camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
camera.position.set(0,0,5);
scene.add(camera);
var renderer = new THREE.WebGLRenderer();
renderer.setSize( WIDTH , HEIGHT );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
controls = new THREE.OrbitControls(camera, renderer.domElement);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}
animate();
</script>
<div>
<button onclick="updateThing();">Update Thing</button>
</div>
</body>
<script src="scripts.js" type="text/javascript" charset="utf-8"></script>
</html>
My function for making the change when the button is pressed:
function updateThing() {
scene.remove(cube)
var pos = new THREE.Vector3(0, 0, 0);
var geo = new THREE.Sphere(pos, parseFloat(1.4));
var mat = new THREE.MeshNormalMaterial();
sphere = new THREE.Mesh( geo, mat );
scene.add( sphere );
}
Am I doing something wrong?
Orbit controls can be found here: https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js

I believe you are looking for THREE.SphereGeometry instead of THREE.Sphere:
var geo = new THREE.SphereGeometry(parseFloat(1.4));
See documentation here and here.

Cannot initialize dat.GUI in Three.js

When i run my code, i get the following error in this line:
var gui = new dat.GUI();
error: Unable to get the 'getItem' property null reference or undefined.
I imported the library, i don't know what is wrong, here is my code:
<html>
<head>
<title>Stack Overflow</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/three.min.js"></script>
<script src="js/optimer_regular.typeface.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/stats.min.js"></script>
<script src="js/threex.dynamictexture.js"></script>
<script src="js/dat.gui.min.js"></script>
<script>
//Basic Three components
var scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000 );
//position camera
camera.position.z = 700;
//Set camera controls
var controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
//Set the renderer
var renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//Set the lights
var light;
scene.add( new THREE.AmbientLight( 0x404040 ) );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 );
scene.add( light );
//Let's add a cute cube
var object;
var map = THREE.ImageUtils.loadTexture( 'images/UV_Grid_Sm.jpg' );
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;
var material = new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide } );
object = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 ), material );
object.position.set( 400, 20, 50 );
scene.add( object );
//Let's add a GUI
var API = {
'show model' : true,
'show skeleton' : false
};
var gui = new dat.GUI();
function animate() {
requestAnimationFrame( animate );
render();
}
//Render scene
function render() {
controls.update();
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>

Solution: Don't use Internet Explorer, i run the same code in Firefox and it works.

Follow this steps
First Close your existing project and open a new folder.
then go to this folder location in terminal by {cd [path]}
Run this commands:
1.https://github.com/designcourse/threejs-webpack-starter.git
2.npm install
3.npm run dev
4.npm run build
after no.3 execution you may face some warnings try to ignore or if you see some fatal issues then run
npm audit fix
not solved yet ....run..
npm audit fix --force [couple of time if need]
after running no.3 if you browser opens then all is fine.
you can dat.gui is installed in your folder just use it customize as you want.
you will find all the required files in your newly created folder.

Three js embed html

Hy!
I'm working with three js(webgl). I was trying to embed html webpage, but somehow it don't wants to work.
Tutorials that I was checking:
http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/
http://stemkoski.github.io/Three.js/CSS3D.html
The stemkoski one was working with three js v58, also v60. But it don't realy wants to work using v68(newest version). I don't get any error message, just a black screen where the website should be.
Also I'm able to do something similiar like http://threejs.org/examples/#css3d_youtube .
My question is is there a workaround, or "hot fix" for this problem because I'm out of ideas.
Thanks for your answers.
---UPDATE---
Then let's say I'm using this code:
<!doctype html>
<html lang="en">
<head>
<title>CSS3D (Three.js)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel=stylesheet href="css/base.css"/>
</head>
<body>
<script src="js/Three58.js"></script>
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/THREEx.KeyboardState.js"></script>
<script src="js/THREEx.FullScreen.js"></script>
<script src="js/THREEx.WindowResize.js"></script>
<!-- new for this example -->
<script src="js/CSS3DRenderer.js"></script>
<!-- jQuery code to display an information button and box when clicked. -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel=stylesheet href="css/jquery-ui.css" />
<link rel=stylesheet href="css/info.css"/>
<script src="js/info.js"></script>
<div id="infoButton"></div>
<div id="infoBox" title="Demo Information">
This three.js demo is part of a collection at
http://stemkoski.github.io/Three.js/
</div>
<!-- ------------------------------------------------------------ -->
<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
<script>
/*
Three.js "tutorials by example"
Author: Lee Stemkoski
Date: July 2013 (three.js v58)
This demo is based on the work of Jerome Etienne:
http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/
*/
// MAIN
// standard global variables
var container, scene, camera, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
// custom global variables
var rendererCSS;
init();
animate();
// FUNCTIONS
function init()
{
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0,150,400);
camera.lookAt(scene.position);
// RENDERER
if ( Detector.webgl )
renderer = new THREE.WebGLRenderer( {antialias:true} );
else
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'ThreeJS' );
container.appendChild( renderer.domElement );
// EVENTS
THREEx.WindowResize(renderer, camera);
THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
// CONTROLS
controls = new THREE.OrbitControls( camera, renderer.domElement );
// STATS
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
scene.add(light);
// FLOOR
var floorTexture = new THREE.ImageUtils.loadTexture( 'images/checkerboard.jpg' );
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set( 10, 10 );
var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
scene.add(floor);
////////////
// CUSTOM //
////////////
var planeMaterial = new THREE.MeshBasicMaterial({color: 0x000000, opacity: 0.1, side: THREE.DoubleSide });
var planeWidth = 360;
var planeHeight = 120;
var planeGeometry = new THREE.PlaneGeometry( planeWidth, planeHeight );
var planeMesh= new THREE.Mesh( planeGeometry, planeMaterial );
planeMesh.position.y += planeHeight/2;
// add it to the standard (WebGL) scene
scene.add(planeMesh);
// create a new scene to hold CSS
cssScene = new THREE.Scene();
// create the iframe to contain webpage
var element = document.createElement('iframe')
// webpage to be loaded into iframe
element.src = "index.html";
// width of iframe in pixels
var elementWidth = 1024;
// force iframe to have same relative dimensions as planeGeometry
var aspectRatio = planeHeight / planeWidth;
var elementHeight = elementWidth * aspectRatio;
element.style.width = elementWidth + "px";
element.style.height = elementHeight + "px";
// create a CSS3DObject to display element
var cssObject = new THREE.CSS3DObject( element );
// synchronize cssObject position/rotation with planeMesh position/rotation
cssObject.position = planeMesh.position;
cssObject.rotation = planeMesh.rotation;
// resize cssObject to same size as planeMesh (plus a border)
var percentBorder = 0.05;
cssObject.scale.x /= (1 + percentBorder) * (elementWidth / planeWidth);
cssObject.scale.y /= (1 + percentBorder) * (elementWidth / planeWidth);
cssScene.add(cssObject);
// create a renderer for CSS
rendererCSS = new THREE.CSS3DRenderer();
rendererCSS.setSize( window.innerWidth, window.innerHeight );
rendererCSS.domElement.style.position = 'absolute';
rendererCSS.domElement.style.top = 0;
rendererCSS.domElement.style.margin = 0;
rendererCSS.domElement.style.padding = 0;
document.body.appendChild( rendererCSS.domElement );
// when window resizes, also resize this renderer
THREEx.WindowResize(rendererCSS, camera);
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = 0;
// make sure original renderer appears on top of CSS renderer
renderer.domElement.style.zIndex = 1;
rendererCSS.domElement.appendChild( renderer.domElement );
}
function animate()
{
requestAnimationFrame( animate );
render();
update();
}
function update()
{
if ( keyboard.pressed("z") )
{
// do something
}
controls.update();
stats.update();
}
function render()
{
// remember to call both renderers!
rendererCSS.render( cssScene, camera );
renderer.render( scene, camera );
}
</script>
</body>
</html>
As I mentioned above, this is the code from http://stemkoski.github.io/Three.js/CSS3D.html, and he made his code from another tutorial: http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/ this one.
The problem is, theese are working on three js r58-r60(Let's say theese are old codes). I want to do the same thing with three js r68(the newest version). But somehow, when I launch the same code on r68 that screen goes black instead of showing a html page. This is a known bug, you can check it http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/ here:
Hi Jerome, thanks for your interest. Here are a couple of jsfiddles
copied from stemkoski's github showing the results of Three r58 and
r68. Observe that the only difference between the samples is the
library in use: Threejs 58 (working) - http://jsfiddle.net/jL48v/2/
Threejs 68 (broken) - http://jsfiddle.net/jL48v/3/
I've tried several approaches to get this technique working in r68,
but without much luck so far.
Just realized that I messed up the dependency load order. Here's a
"fixed" broken version of r68 - http://jsfiddle.net/jL48v/4/
But he/she forgot to write the solution. and the v4 not working either.