Newpixel - Blog

A quick code drop here to fill in a minor missing piece of functionality in away3d lite- a function to compute an axis-aligned bounding box on a Mesh. The code, which I’ve included as a member function of Mesh.as, simply runs through all the vertices to find the bounding box. This operates on the raw geometry, and does not apply to transformed objects.


/*
 * Returns an axis-aligned bounding box
 *
 * Added by richpixel, 6/27/11, code is from Papervision, modified for away3d vertex format
 */
public function get AABB():Object
{
	var minX :Number = Number.MAX_VALUE;
	var minY :Number = Number.MAX_VALUE;
	var minZ :Number = Number.MAX_VALUE;
	var maxX :Number = -minX;
	var maxY :Number = -minY;
	var maxZ :Number = -minZ;

	var k:int = _vertices.length/3;
	while (k--)
	{
		var vx:Number = _vertices[k*3];
		var vy:Number = _vertices[k*3+1];
		var vz:Number = _vertices[k*3+2];

		minX = Math.min(minX, vx);
		minY = Math.min(minY, vy);
		minZ = Math.min(minZ, vz);
		maxX = Math.max(maxX, vx);
		maxY = Math.max(maxY, vy);
		maxZ = Math.max(maxZ, vz);
	}

	return {minX: minX, minY: minY, minZ: minZ, maxX: maxX, maxY: maxY, maxZ: maxZ};
}

Our blog is still running WordPress 2.8.4 as we don’t really have time to make all the upgrades on the plugins and such. So we are stuck in the WP backwaters for now. Just one of the downsides of running an older version is not having access to all the latest and greatest plugins. For example we wanted to add a simple lightbox to our site to show off projects. Sounds easy enough – there is no shortage of free lightbox plugins, and a lot of them seemed to be a perfect fit for us. Unfortunately, none of them worked. Many had 3.0 or above as a minimum req. and others just simply didn’t work, look good, or generally failed for whatever reason. Shadowbox was one of the plugins I was really interested in because it was built on top of a very well regarded javascript lightbox solution…. but it requires WP 3.1. So what could we do? After checking out Shadowbox it seemed like it would be easy enough to add it directly to the page (with a little coding), thus bypassing the need for a clunky, broken plugin- I won’t name names on these, and I should add it’s possible I didn’t really take the time to simply get them to work!

If you don’t have Shadowbox, they make it super simple to download a light-weight package customized for your deployment situation, with plenty of documentation and support available.

First, download a custom version of shadowbox from their site, using jQuery as the adapter. (The others would work too, but I chose jQuery because WordPress comes with jQuery installed). It will custom create a zip file with only the code you need to display the desired content.

Unpack the zip file and upload the shadowbox folder to your server. I put ’shadowbox-3.0.3′ inside ‘wp-includes/js’ in my wordpress site.

In order to register the javascript and css for shadowbox, you could add a hook for the ‘init’ action which would ensure the script is placed on all your pages. In that case you would ‘wp_enqueue_script()’ and ‘wp_enqueue_style()’ inside the hook function to include shadowbox. In my case, I just wanted to include shadowbox on a single page, so I added a hook for ‘wp_head’ on my page template php. This code needs to be put on your page before the call to get_header().

/**
* Adds javascript shadowbox options
*/
function add_shadwobox_head()
{
echo "<link rel='stylesheet' type='text/css' href='".get_bloginfo('url')."/wp-includes/js/shadowbox-3.0.3/shadowbox.css'>\n";
echo "<script type='text/javascript' src='".get_bloginfo('url')."/wp-includes/js/shadowbox-3.0.3/shadowbox.js'></script>\n";
echo "<script type='text/javascript'>\n";
echo "Shadowbox.init();\n";
echo "</script>\n\n";
}
add_action( 'wp_head', 'add_shadwobox_head');

Now, to trigger the shadowbox, all you have to do is add special code to the ‘rel’ attribute on your links. There are more options besides width and height of the lightbox, but all you really need is rel=”shadowbox” to bring it up:

<a rel="shadowbox;width=800;height=600" href="http://www.google.com">Google Test</a>

Try it out: Google Test

Getting a bounding box in Away3D Lite

Using Shadowbox in Wordpress