HTML5 Dev Gal

Messing with HTML5, CSS3 and JavaScript.

Trick to Get three.js Camera Z Plane Value in Browser Development Tools Console

| Comments

Here’s a tip on how to get the z plane camera position in chrome’s console.

In this example my render DOM element container has an id of video_container. Just replace it with yours. Also I’m using jquery so you will need to have that included in your app.

I attached this to a global variable (poc is the global namespace of my app) so I can just enter poc.DebugData() in the console.

Debug Code 
poc.DebugData = function () {
     if ($("#video_container").length > 0) {
         return {
             "window height" : window.innerHeight,
             "window width" : window.innerWidth,
             "camera z pos" : Math.abs(
                 parseInt(
                     $("#video_container")
                         .children("div")
                         .eq(0)
                         .children()[0]
                         .attributes.style.nodeValue
                         .split(': ')[4]
                         .split(') ')[1]
                         .split(', ')[14]
                 )
             )
         };
     }
 };

There’s probably a cleaner way to do this but this is what I’ve got!

Comments