{"id":83813,"date":"2022-08-11T15:05:52","date_gmt":"2022-08-11T13:05:52","guid":{"rendered":"https:\/\/rmarketingdigital.com\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/"},"modified":"2021-07-06T09:59:40","modified_gmt":"2021-07-06T07:59:40","slug":"posicionar-objetos-virtuales-en-vistas-del-mundo-real","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/","title":{"rendered":"Positionieren Sie virtuelle Objekte in realen Ansichten"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/#La-muestra-de-sesion-de-realidad-aumentada-inmersiva\" >La muestra de sesi\u00f3n de realidad aumentada inmersiva<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/#Crea-la-reticula\" >Crea la ret\u00edcula<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/#Solicita-una-sesion\" >Solicita una sesi\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/#Ingresar-en-una-sesion\" >Ingresar en una sesi\u00f3n<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/#Diversos-espacios-de-referencia\" >Diversos espacios de referencia<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/#Ejecutando-un-bucle-de-cuadro\" >Ejecutando un bucle de cuadro<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/#Colocando-un-objeto\" >Colocando un objeto<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/#Conclusion\" >Conclusi\u00f3n<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          La API Hit Test le posibilita colocar \u00edtems virtuales en una vista del mundo real.\n        <\/p>\n<p>\n          <time>13 de febrero de 2020<\/time><br \/>\n            Actualizado <time>4 de junio de 2020<\/time>\n        <\/p>\n<\/header>\n<p>La API del dispositivo WebXR se envi\u00f3 el oto\u00f1o pasado en Chrome 79. Como se dijo entonces, la implementaci\u00f3n de la API en Chrome es un trabajo en progreso.  Chrome se complace en anunciar que parte del trabajo est\u00e1 acabado.  En Chrome 81, han llegado dos nuevas funciones:<\/p>\n<p>Este post cubre el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/immersive-web\/hit-test\/blob\/master\/hit-testing-explainer.md\">API de prueba de visita de WebXR<\/a>, un medio para colocar objetos virtuales en una vista de c\u00e1mara del mundo real.<\/p>\n<p>En este post, supongo que ya sabe c\u00f3mo crear una sesi\u00f3n de realidad aumentada y que sabe c\u00f3mo ejecutar un frame loop.  Si no est\u00e1 familiarizado con estos conceptos, deber\u00eda leer los posts anteriores de esta serie.<\/p>\n<h2 id=\"the-immersive-ar-session-sample\"><span class=\"ez-toc-section\" id=\"La-muestra-de-sesion-de-realidad-aumentada-inmersiva\"><\/span>La muestra de sesi\u00f3n de realidad aumentada inmersiva <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El c\u00f3digo de este post se basa, pero no es equivalente, al que se encuentra en la muestra de prueba de impacto del Immersive Web Working Group (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/hit-test.html\">manifestaci\u00f3n<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/immersive-web\/webxr-samples\/blob\/master\/hit-test.html\">fuente<\/a>).  Este ejemplo le posibilita colocar girasoles virtuales en superficies del mundo real.<\/p>\n<p>Cuando abra la aplicaci\u00f3n por primera vez, ver\u00e1 un c\u00edrculo azul con un punto en el medio.  El punto es la intersecci\u00f3n entre una l\u00ednea imaginaria desde su dispositivo hasta el punto en el entorno.  Se mueve a medida que mueve el dispositivo.  A medida que encuentra puntos de intersecci\u00f3n, parece que se ajusta a superficies como suelos, mesas y paredes.  Lo hace debido a que la prueba de impacto proporciona la posici\u00f3n y orientaci\u00f3n del punto de intersecci\u00f3n, pero nada sobre las superficies en s\u00ed.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Un recordatorio para aquellos de ustedes que son nuevos: en la API del dispositivo WebXR, \u00abposici\u00f3n y orientaci\u00f3n\u00bb est\u00e1n cubiertos por el t\u00e9rmino pose.  Usar\u00e9 ese t\u00e9rmino de ahora en m\u00e1s.<\/p>\n<\/div>\n<p>Este c\u00edrculo se llama <em>ret\u00edculo<\/em>, que es una imagen temporal que ayuda a colocar un objeto en realidad aumentada.  Si toca la pantalla, se coloca un girasol en la superficie en la ubicaci\u00f3n de la ret\u00edcula y la orientaci\u00f3n del punto de la ret\u00edcula, sin tener en cuenta d\u00f3nde haya tocado la pantalla.  La ret\u00edcula contin\u00faa movi\u00e9ndose con su dispositivo.<\/p>\n<figure class=\"w-figure  w-figure--right\">\n  <img alt='reticles-2944411' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/reticles-2944411.png' alt=\"Una ret\u00edcula renderizada en una pared, Laxa o Estricta seg\u00fan su contexto\" style=\"max-width: 60vw;\"><figcaption class=\"w-figcaption\">\n<p>    La ret\u00edcula es una imagen temporal que ayuda a colocar un objeto en realidad aumentada.<br \/>\n  <\/figcaption><\/figure>\n<h2 id=\"create-the-reticle\"><span class=\"ez-toc-section\" id=\"Crea-la-reticula\"><\/span>Crea la ret\u00edcula <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Debe crear la imagen de la ret\u00edcula usted mismo, dado que no la proporciona el navegador ni la API.  El m\u00e9todo de carga y dibujo es espec\u00edfico del marco.  Si no lo est\u00e1 dibujando de forma directa utilizando WebGL o WebGL2, consulte la documentaci\u00f3n de su marco.  Por esta raz\u00f3n, no entrar\u00e9 en detalles acerca de c\u00f3mo se dibuja la ret\u00edcula en la muestra.  A continuaci\u00f3n, muestro una l\u00ednea por una sola raz\u00f3n: para que en ejemplos de c\u00f3digo posteriores, sepa a qu\u00e9 me refiero cuando uso el <code>reticle<\/code><br \/>\nvariable.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">let<\/span> reticle <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Gltf2Node<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>direcci\u00f3n url<span class=\"token operator\">:<\/span> <span class=\"token string\">'media\/gltf\/reticle\/reticle.gltf'<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"request-a-session\"><span class=\"ez-toc-section\" id=\"Solicita-una-sesion\"><\/span>Solicita una sesi\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Al solicitar una sesi\u00f3n, debe solicitar <code>'hit-test'<\/code> en el<br \/>\n<code>requiredFeatures<\/code> matriz como se muestra a continuaci\u00f3n.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">navigator<span class=\"token punctuation\">.<\/span>xr<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestSession<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'immersive-ar'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><br>requiredFeatures<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'local'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'hit-test'<\/span><span class=\"token punctuation\">]<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">session<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"entering-a-session\"><span class=\"ez-toc-section\" id=\"Ingresar-en-una-sesion\"><\/span>Ingresar en una sesi\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>En posts anteriores, present\u00e9 el c\u00f3digo para entrar a una sesi\u00f3n XR.  He mostrado una versi\u00f3n de esto a continuaci\u00f3n con algunas adiciones.  Primero agregu\u00e9 el <code>select<\/code> oyente de eventos.  Cuando el usuario toca la pantalla, se colocar\u00e1 una flor en la vista de la c\u00e1mara seg\u00fan la pose del ret\u00edculo.  Describir\u00e9 ese oyente de eventos m\u00e1s tarde.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">onSessionStarted<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">xrSession<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'end'<\/span><span class=\"token punctuation\">,<\/span> onSessionEnded<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'select'<\/span><span class=\"token punctuation\">,<\/span> onSelect<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">let<\/span> canvas <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'canvas'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  gl <span class=\"token operator\">=<\/span> canvas<span class=\"token punctuation\">.<\/span><span class=\"token function\">getContext<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'webgl'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> xrCompatible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">updateRenderState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    baseLayer<span class=\"token operator\">:<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">XRWebGLLayer<\/span><span class=\"token punctuation\">(<\/span>session<span class=\"token punctuation\">,<\/span> gl<span class=\"token punctuation\">)<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><mark class=\"highlight-line highlight-line-active\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestReferenceSpace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'viewer'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">refSpace<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">    xrViewerSpace <span class=\"token operator\">=<\/span> refSpace<span class=\"token punctuation\">;<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">    xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestHitTestSource<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> space<span class=\"token operator\">:<\/span> xrViewerSpace <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">hitTestSource<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">      xrHitTestSource <span class=\"token operator\">=<\/span> hitTestSource<span class=\"token punctuation\">;<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\"><\/mark><br><mark class=\"highlight-line highlight-line-active\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestReferenceSpace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'local'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">refSpace<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">    xrRefSpace <span class=\"token operator\">=<\/span> refSpace<span class=\"token punctuation\">;<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">    xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span>onXRFrame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\"><span class=\"token punctuation\">}<\/span><\/mark><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"multiple-reference-spaces\"><span class=\"ez-toc-section\" id=\"Diversos-espacios-de-referencia\"><\/span>Diversos espacios de referencia <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Observe que el c\u00f3digo resaltado llama <code>XRSession.requestReferenceSpace()<\/code><br \/>\ndos veces.  Inicialmente encontr\u00e9 esto confuso.  Pregunt\u00e9 por qu\u00e9 el c\u00f3digo de prueba de impacto no solicita un cuadro de animaci\u00f3n (iniciando el ciclo de cuadro) y por qu\u00e9 el ciclo de cuadro no parece involucrar pruebas de impacto.  El origen de la confusi\u00f3n fue un malentendido de los espacios de referencia.  Los espacios de referencia expresan relaciones entre un origen y el mundo.<\/p>\n<p>Para saber lo que hace este c\u00f3digo, imagina que est\u00e1s viendo esta muestra con un equipo independiente y tienes tanto un auricular como un controlador.  Para medir distancias desde el controlador, usar\u00eda un marco de referencia centrado en el controlador.  Pero para dibujar algo en la pantalla, usar\u00eda coordenadas centradas en el usuario.<\/p>\n<p>En esta muestra, el visor y el controlador son el mismo dispositivo.  Pero tengo un obst\u00e1culo.  Lo que dibujo debe ser estable con respecto al entorno, pero el &#8216;controlador&#8217; con el que estoy dibujando se est\u00e1 moviendo.<\/p>\n<p>Para dibujar im\u00e1genes, utilizo el <code>local<\/code> espacio de referencia, lo que me da estabilidad en cuanto al entorno.  Posteriormente de conseguir esto, comienzo el ciclo del marco llamando <code>requestAnimationFrame()<\/code>.<\/p>\n<p>Para las pruebas de posicionamiento, utilizo el <code>viewer<\/code> espacio de referencia, que se basa en la pose del dispositivo en el momento de la prueba de impacto.  La etiqueta \u00abvisor\u00bb es algo confusa en este contexto debido a que estoy hablando de un controlador.  Tiene sentido si piensa en el controlador como un visor electr\u00f3nico.  Posteriormente de recibir esto, llamo <code>xrSession.requestHitTestSource()<\/code>, que crea la fuente de datos de prueba de impacto que usar\u00e9 al dibujar.<\/p>\n<h2 id=\"running-a-frame-loop\"><span class=\"ez-toc-section\" id=\"Ejecutando-un-bucle-de-cuadro\"><\/span>Ejecutando un bucle de cuadro <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>los <code>requestAnimationFrame()<\/code> callback adem\u00e1s obtiene un nuevo c\u00f3digo para manejar las pruebas de visitas.<\/p>\n<p>A medida que mueve su dispositivo, la ret\u00edcula debe moverse con \u00e9l mientras intenta hallar superficies.  Para crear la ilusi\u00f3n de movimiento, vuelva a dibujar la ret\u00edcula en cada fotograma.  Pero no muestre la ret\u00edcula si falla la prueba.  Entonces, para la ret\u00edcula que cre\u00e9 previamente, configur\u00e9 su <code>visible<\/code> propiedad a <code>false<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">onXRFrame<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">hrTime<span class=\"token punctuation\">,<\/span> xrFrame<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">let<\/span> xrSession <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span>session<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span>onXRFrame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">let<\/span> xrViewerPose <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span><span class=\"token function\">getViewerPose<\/span><span class=\"token punctuation\">(<\/span>xrRefSpace<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><mark class=\"highlight-line highlight-line-active\">  reticle<span class=\"token punctuation\">.<\/span>visible <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  <\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>xrHitTestSource <span class=\"token operator\">&amp;&amp;<\/span> xrViewerPose<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">let<\/span> hitTestResults <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span><span class=\"token function\">getHitTestResults<\/span><span class=\"token punctuation\">(<\/span>xrHitTestSource<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>hitTestResults<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token keyword\">let<\/span> pose <span class=\"token operator\">=<\/span> hitTestResults<span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getPose<\/span><span class=\"token punctuation\">(<\/span>xrRefSpace<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">      reticle<span class=\"token punctuation\">.<\/span>visible <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">      reticle<span class=\"token punctuation\">.<\/span>matrix <span class=\"token operator\">=<\/span> pose<span class=\"token punctuation\">.<\/span>transform<span class=\"token punctuation\">.<\/span>matrix<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  <\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Para dibujar cualquier cosa en AR, necesito saber d\u00f3nde est\u00e1 el espectador y hacia d\u00f3nde est\u00e1 mirando.  Por lo tanto pruebo eso <code>hitTestSource<\/code> y el <code>xrViewerPose<\/code> siguen siendo v\u00e1lidos.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">onXRFrame<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">hrTime<span class=\"token punctuation\">,<\/span> xrFrame<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">let<\/span> xrSession <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span>session<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span>onXRFrame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token keyword\">let<\/span> xrViewerPose <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span><span class=\"token function\">getViewerPose<\/span><span class=\"token punctuation\">(<\/span>xrRefSpace<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  reticle<span class=\"token punctuation\">.<\/span>visible <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  <\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>xrHitTestSource <span class=\"token operator\">&amp;&amp;<\/span> xrViewerPose<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/mark><br><span class=\"highlight-line\">    <span class=\"token keyword\">let<\/span> hitTestResults <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span><span class=\"token function\">getHitTestResults<\/span><span class=\"token punctuation\">(<\/span>xrHitTestSource<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>hitTestResults<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token keyword\">let<\/span> pose <span class=\"token operator\">=<\/span> hitTestResults<span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getPose<\/span><span class=\"token punctuation\">(<\/span>xrRefSpace<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">      reticle<span class=\"token punctuation\">.<\/span>visible <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">      reticle<span class=\"token punctuation\">.<\/span>matrix <span class=\"token operator\">=<\/span> pose<span class=\"token punctuation\">.<\/span>transform<span class=\"token punctuation\">.<\/span>matrix<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  <\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Ahora llamo <code>getHitTestResults()<\/code>.  Se requiere el <code>hitTestSource<\/code> como argumento y devuelve una matriz de <code>HitTestResult<\/code> instancias.  La prueba de impacto puede hallar diversos superficies.  El primero de la matriz es el m\u00e1s cercano a la c\u00e1mara.  La mayor\u00eda de las veces lo usar\u00e1, pero se devuelve una matriz para casos de uso avanzados.  A modo de ejemplo, imagina que tu c\u00e1mara apunta a una caja en una mesa en el piso.  Es viable que la prueba de impacto devuelva las tres superficies de la matriz.  En la mayor\u00eda de los casos, ser\u00e1 la caja que me importa.  Si la longitud de la matriz devuelta es 0, en otras palabras, si no se devuelve ninguna prueba, contin\u00fae hacia adelante.  Vuelve a intentarlo en el siguiente cuadro.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">onXRFrame<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">hrTime<span class=\"token punctuation\">,<\/span> xrFrame<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">let<\/span> xrSession <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span>session<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span>onXRFrame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">let<\/span> xrViewerPose <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span><span class=\"token function\">getViewerPose<\/span><span class=\"token punctuation\">(<\/span>xrRefSpace<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  reticle<span class=\"token punctuation\">.<\/span>visible <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  <\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>xrHitTestSource <span class=\"token operator\">&amp;&amp;<\/span> xrViewerPose<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token keyword\">let<\/span> hitTestResults <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span><span class=\"token function\">getHitTestResults<\/span><span class=\"token punctuation\">(<\/span>xrHitTestSource<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>hitTestResults<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/mark><br><span class=\"highlight-line\">      <span class=\"token keyword\">let<\/span> pose <span class=\"token operator\">=<\/span> hitTestResults<span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getPose<\/span><span class=\"token punctuation\">(<\/span>xrRefSpace<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">      reticle<span class=\"token punctuation\">.<\/span>visible <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">      reticle<span class=\"token punctuation\">.<\/span>matrix <span class=\"token operator\">=<\/span> pose<span class=\"token punctuation\">.<\/span>transform<span class=\"token punctuation\">.<\/span>matrix<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  <\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Para terminar, necesito procesar los resultados de la prueba de posicionamiento.  El procedimiento b\u00e1sico es este.  Obtenga una pose del resultado de la prueba de impacto, transforme (mueva) la imagen del ret\u00edculo a la posici\u00f3n de la prueba de impacto, posteriormente configure su <code>visible<\/code> propiedad a verdadero.  La pose representa la pose de un punto en una superficie.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">onXRFrame<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">hrTime<span class=\"token punctuation\">,<\/span> xrFrame<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">let<\/span> xrSession <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span>session<span class=\"token punctuation\">;<\/span><br>xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span>onXRFrame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">let<\/span> xrViewerPose <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span><span class=\"token function\">getViewerPose<\/span><span class=\"token punctuation\">(<\/span>xrRefSpace<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><p>reticle<span class=\"token punctuation\">.<\/span>visible <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><\/p><p><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>xrHitTestSource <span class=\"token operator\">&amp;&amp;<\/span> xrViewerPose<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">let<\/span> hitTestResults <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span><span class=\"token function\">getHitTestResults<\/span><span class=\"token punctuation\">(<\/span>xrHitTestSource<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>hitTestResults<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">let<\/span> pose <span class=\"token operator\">=<\/span> hitTestResults<span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getPose<\/span><span class=\"token punctuation\">(<\/span>xrRefSpace<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>reticle<span class=\"token punctuation\">.<\/span>matrix <span class=\"token operator\">=<\/span> pose<span class=\"token punctuation\">.<\/span>transform<span class=\"token punctuation\">.<\/span>matrix<span class=\"token punctuation\">;<\/span><br>reticle<span class=\"token punctuation\">.<\/span>visible <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><\/p><p><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/p><p><br><span class=\"token punctuation\">}<\/span><br><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"placing-an-object\"><span class=\"ez-toc-section\" id=\"Colocando-un-objeto\"><\/span>Colocando un objeto <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Un objeto se coloca en AR cuando el usuario toca la pantalla.  Ya agregu\u00e9 un<br \/>\n<code>select<\/code> controlador de eventos a la sesi\u00f3n.  (V\u00e9ase m\u00e1s arriba.)<\/p>\n<p>Lo importante en este paso es saber d\u00f3nde colocarlo.  Puesto que la ret\u00edcula en movimiento le brinda una fuente constante de pruebas de impacto, la forma m\u00e1s sencilla de colocar un objeto es dibujarlo en la ubicaci\u00f3n de la ret\u00edcula en la \u00faltima prueba de impacto.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">onSelect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>reticle<span class=\"token punctuation\">.<\/span>visible<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token function\">addARObjectAt<\/span><span class=\"token punctuation\">(<\/span>reticle<span class=\"token punctuation\">.<\/span>matrix<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusi\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La mejor manera de manejar esto es pasar por el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/immersive-ar-session.html\">C\u00f3digo de muestra<\/a> o prueba el<br \/>\ncodelab.  Espero haberte dado suficientes antecedentes para que ambos tengan sentido.<\/p>\n<p>No hemos acabado de crear API web inmersivas, ni mucho menos.  Publicaremos nuevos posts aqu\u00ed a medida que avancemos.<\/p>\n<p>Foto por <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@fr3nks\">Daniel Frank<\/a> en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/\">Unsplash<\/a><\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>\n","protected":false},"excerpt":{"rendered":"<p>La API Hit Test le posibilita colocar \u00edtems virtuales en una vista del mundo real. 13 de febrero de 2020 Actualizado 4 de junio de 2020 La API del dispositivo&#8230;<\/p>","protected":false},"author":1,"featured_media":83814,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83813","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Posicionar objetos virtuales en vistas del mundo real - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"La API Hit Test le posibilita colocar \u00edtems virtuales en una vista del mundo real. 13 de febrero de 2020 Actualizado 4 de junio de 2020 La API del\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Posicionar objetos virtuales en vistas del mundo real\" \/>\n<meta property=\"og:description\" content=\"La API Hit Test le posibilita colocar \u00edtems virtuales en una vista del mundo real. 13 de febrero de 2020 Actualizado 4 de junio de 2020 La API del\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-11T13:05:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9452252.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Posicionar objetos virtuales en vistas del mundo real\",\"datePublished\":\"2022-08-11T13:05:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\\\/\"},\"wordCount\":1311,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-9452252.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\\\/\",\"name\":\"Posicionar objetos virtuales en vistas del mundo real - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-9452252.jpg\",\"datePublished\":\"2022-08-11T13:05:52+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"La API Hit Test le posibilita colocar \u00edtems virtuales en una vista del mundo real. 13 de febrero de 2020 Actualizado 4 de junio de 2020 La API del\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-9452252.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-9452252.jpg\",\"width\":1200,\"height\":800,\"caption\":\"hero-9452252-4284906-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Posicionar objetos virtuales en vistas del mundo real - R Marketing Digital","description":"La API Hit Test le posibilita colocar \u00edtems virtuales en una vista del mundo real. 13 de febrero de 2020 Actualizado 4 de junio de 2020 La API del","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/","og_locale":"de_DE","og_type":"article","og_title":"Posicionar objetos virtuales en vistas del mundo real","og_description":"La API Hit Test le posibilita colocar \u00edtems virtuales en una vista del mundo real. 13 de febrero de 2020 Actualizado 4 de junio de 2020 La API del","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/","og_site_name":"R Marketing Digital","article_published_time":"2022-08-11T13:05:52+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9452252.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Posicionar objetos virtuales en vistas del mundo real","datePublished":"2022-08-11T13:05:52+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/"},"wordCount":1311,"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9452252.jpg","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/","url":"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/","name":"Posicionar objetos virtuales en vistas del mundo real - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9452252.jpg","datePublished":"2022-08-11T13:05:52+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"La API Hit Test le posibilita colocar \u00edtems virtuales en una vista del mundo real. 13 de febrero de 2020 Actualizado 4 de junio de 2020 La API del","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/posicionar-objetos-virtuales-en-vistas-del-mundo-real\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9452252.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9452252.jpg","width":1200,"height":800,"caption":"hero-9452252-4284906-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=83813"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83813\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/83814"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=83813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=83813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=83813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}