He estado trabajando en una demostración en P5.js que mostraría el interior de un cubo con rotación seguida de la rotación de un dispositivo móvil. Podríamos llamar a este pobre-hombre-AR, ya que no necesito una señal de cámara, solo la rotación. Para obtener los ángulos he usado el código:

 window.addEventListener('deviceorientation', function(e) { if (e.alpha) { rotZ = radians(e.alpha); rotX = radians(e.beta); rotY = radians(e.gamma); } });

Luego, para mostrar el cubo, he usado el código:

 var cam, fov = 0.5, rotX = 0, rotY = 0, rotZ = 0; var dim = Math.floor(Math.min(window.innerWidth, window.innerHeight)); function setup() { canvas = createCanvas(dim, dim, WEBGL); canvas.id('p5canvas'); cam = createCamera(); } function draw() { perspective(PI * fov, 1, 0.01, 10 * dim); cam.setPosition(0,0,0); rotateZ(rotZ); rotateX(rotX); rotateY(rotY); clear(); fill(255); stroke(0); strokeWeight(5); box(100); }

Y hasta este punto, funciona... más o menos. Girar el teléfono a lo largo del eje X (e.beta) funciona como se esperaba. Puedo ver fácilmente el suelo y el techo del cubo. Sin embargo, cuando el teléfono mira hacia adelante, aparece el problema. Cuando muevo mi teléfono hacia la izquierda o hacia la derecha, girando todo mi cuerpo (para que el teléfono gire a lo largo del eje Y (por ejemplo, gamma)), el cubo rueda. Funciona más como la rotación a lo largo del eje Z (e.alpha).

Hasta ahora he probado algunas variaciones con órdenes de ángulo, pero luego el problema aparece con un problema técnico cuando el teléfono mira hacia adelante. ¿Supongo que es un problema de bloqueo del cardán con los ángulos de Euler?

Quiero que el resultado sea una experiencia fluida de ver el interior de un cubo 3D, como si estuviéramos dentro y mirando a través de una pantalla.

Sin embargo, este problema debe haberse resuelto, ya que en las aplicaciones AR y VR puedes mirar fácilmente a tu alrededor. Agradecería cualquier ayuda o indicaciones de dónde seguir.

¡Gracias por adelantado!

ACTUALIZAR EDITAR Así que logré llegar a un resultado muy cercano a mis expectativas. Sin embargo, todavía hay una falla menor, cuando el teléfono está vertical y mirando hacia adelante. El código que he usado está aquí:

 var cam, fov = 0.5, rotX = 0, rotY = 0, rotZ = 0; var dim = Math.floor(Math.min(window.innerWidth, window.innerHeight)); function setup() { canvas = createCanvas(dim, dim, WEBGL); canvas.id('p5canvas'); cam = createCamera(); } function draw() { perspective(PI * fov, 1, 0.01, 10 * dim); cam.setPosition(0,0,0); // set camera rotation rotateX(rotX); rotateY(rotY); clear(); fill(255); stroke(0); strokeWeight(5); box(100); } window.addEventListener('deviceorientation', function(e) { if (e.alpha) { gyro = true; rotY = -radians(parseFloat(e.alpha + e.gamma).toFixed(1)); rotX = map(parseFloat(e.beta).toFixed(2), 0, 180, -PI/2, PI/2); } });

Cuando usé solo los ángulos X e Y en la rotación, fue mucho más intuitivo. Sin embargo, aparece la falla, que no estaba allí antes :(