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:
https://developer.vuforia.com/forum/faq/technical-how-do-i-get-camera-position
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.camera.lookAt(three.scene.position);
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...
Hi,
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;// cRXthree.camera.position.y = 0;three.camera.position.z = Math.cos(cam_right_y) * 600;//CRZ cDX cDY