Log in or register to post comments

WebGL Rendering Matrix Pose Position

April 1, 2013 - 3:37am #1

Hello, I'm doing a proyect with WebGL and Three.js (Newbie here)

I'm looking for how to positioning the 3D Object in the center of the target. 

So far, I have a Cube which appers on screen, but I can't make it to stay on the marker, also some camera problems..

I have looked at this and I take the Matrix Pose from there:


This is my code:


                var VIEW_ANGLE = 45,

                ASPECT = WIDTH / HEIGHT,

                NEAR = 0.1,

                FAR = 10000;

                var renderer = new THREE.WebGLRenderer();

                var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);

                var scene = new THREE.Scene();


                    cam_x = invTranspMV.data[12];

                    cam_y = invTranspMV.data[13];

                    cam_z = invTranspMV.data[14];



                    cam_right_x = invTranspMV.data[0];

                    cam_right_y = invTranspMV.data[1];

                    cam_right_z = invTranspMV.data[2];

                    cam_up_x    = -invTranspMV.data[4];

                    cam_up_y    = -invTranspMV.data[5];

                    cam_up_z    = -invTranspMV.data[6];

                    cam_dir_x   = invTranspMV.data[8];

                    cam_dir_y   = invTranspMV.data[9];

                    cam_dir_z   = invTranspMV.data[10];


                    //Print the cube..

                    three.cube.position.x= cam_x * -1;

                    three.cube.position.y= cam_y * -1;

                    three.cube.position.z= cam_z * -1;


                    three.cube.rotation.x = cam_right_y*-1;

                    three.cube.rotation.y = cam_up_y*-1;

                    three.cube.rotation.z = cam_up_z*-1;


                    // < -- Set the Camera -- >


                    three.camera.position.x = Math.sin(cam_up_y) * 600; // cRX

                    three.camera.position.y = 0;

                    three.camera.position.z = Math.cos(cam_right_y) * 600; //CRZ cDX cDY


                    three.camera.rotation.x = 0;

                    three.camera.rotation.y = 0;

                    three.camera.rotation.z = 0;



                    three.renderer.render(three.scene, three.camera);


So help will be so much appreaciated, also notice I'm new at this.


Thank you in advance...



WebGL Rendering Matrix Pose Position

January 26, 2021 - 1:04am #9

Hi, I'm currently working on a project with three.js / vue.js WebGL and want to use the Vuforia Model Tracking for one time initial object registration, so I would only need the coordinates of the matched Object.

So far I've read that there is no support for webgl, anyways this reads as if it is possible to write a vuforia plugin for three.js/webgl?

Is it possible to get Vuforia to work in threejs as a plugin, or to run Vuforia in the background and just pass the coordinates to three.js after detection?

Thank you!

WebGL Rendering Matrix Pose Position

May 24, 2014 - 12:35pm #8

I think you'll either need to write a Vuforia plugin for phonegap or overlay phonegap as a view on top of your Vuforia app, and pass pose and projection matrix values from Vuforia to phonegap. 

WebGL Rendering Matrix Pose Position

May 24, 2014 - 8:51am #7


I am trying to create a project using phonegap + vuforia . I am not using wikitude as I want to use open source technologies. Going through your comment make me think you are using threejs and vuforia together. How are you using both together. A help would be really appreciated.

WebGL Rendering Matrix Pose Position

April 5, 2013 - 10:04am #6

Which device and OS version are you using that has a WebGL renderer?

WebGL Rendering Matrix Pose Position

April 5, 2013 - 2:16am #5

Great, thanks fro sharing!

WebGL Rendering Matrix Pose Position

April 5, 2013 - 2:13am #4

Also here's the code for Euler Angles.

// < -- Set Position for object -- >
three.cube.position.x= -model14;
three.cube.position.y= -model13;
//Get Euler Angles for object
ModelEulerx = Math.atan2(model10, model11);
ModelEulery = Math.atan2(-model9, Math.sqrt(model10*model10 + model11*model11));
ModelEulerz = Math.atan2(model5, model1);
//Get Euler Angles for camera
three.cube.eulerOrder   = 'YXZ';
//Rotate the cube with Euler Angles.
three.cube.rotation.x = ModelEulery;
three.cube.rotation.y = ModelEulerx;
three.cube.rotation.z = ModelEulerz;
// < -- Set the Camera -- >
three.camera.position.z = model15 + cam_z/2;
// < -- Look at scene and render -- >
three.renderer.render(three.scene, three.camera);



WebGL Rendering Matrix Pose Position

April 5, 2013 - 2:10am #3

Finally I've figured it out, it turns out that the matrix is defined like this: 



So, for using in Three.Js API you need to switch some values.

Hope this helps anyone else...

Best regards,


Image icon VuforiaMatrix.png106.23 KB

WebGL Rendering Matrix Pose Position

April 2, 2013 - 4:30am #2


one problem that I see in your code is that you are setting the VIEW angle arbitrarily to 45 degrees; however, this value may not correspond to the value delivered by Vuforia (which reflects tha actual device camera field of view).

Also, not quite sure to understand why you set the camera position with this code:


three.camera.position.x = Math.sin(cam_up_y) * 600; // cRX
    three.camera.position.y = 0;
    three.camera.position.z = Math.cos(cam_right_y) * 600; //CRZ cDX cDY
Log in or register to post comments