Amp-google-vrview-image ¿Para qué sirve?


Amp-google-vrview-image


La extensión amp-google-vrview-image permite incorporar medios VR de 360 ​​grados en páginas AMP.

Si experimenta con este ejemplo en un navegador de escritorio, puede interactuar con la imagen mostrada haciendo clic en ella y arrastrando el ratón. La mejor manera de percibir los efectos permitidos por este componente es verlo en un dispositivo móvil e interactuar con las imágenes moviendo el dispositivo usando el visor de cartón .

Los atributos soportados por este componente son:

Src: el origen de la imagen que se muestra
Stereo: si se proporciona, la imagen se considera una imagen estereoscópica; De lo contrario es una imagen monoscópica.
Yaw: rotación inicial de yaw ) del observador
Yaw-only: si se especifica, restrinja el movimiento sólo a las rotaciones de guiñada

Añadir el script amp-google-vrview-image justo abajo de la apertura <head>


<script async custom-element="amp-google-vrview-image" src="https://cdn.ampproject.org/v0/amp-google-vrview-image-0.1.js"></script>


Uso básico

Por defecto amp-google-vrview-image espera una imagen mono y el valor de guiñada es 0.


Ejemplo


<amp-google-vrview-image src="https://storage.googleapis.com/vrview/examples/coral.jpg"   width="400"   height="300"   layout="responsive"> </amp-google-vrview-image>

Agregue el atributo stereo para las imágenes estereoscópicas


Ejemplo


<amp-google-vrview-image src="https://storage.googleapis.com/vrview/examples/coral.jpg"   stereo   width="400"   height="300"   layout="responsive"> </amp-google-vrview-image>

Agregue el atributo stereo para las imágenes estereoscópicas. El valor inicial de guiñada es de 90 grados


Ejemplo


<amp-google-vrview-image src="https://storage.googleapis.com/vrview/examples/coral.jpg"   stereo   yaw="90"   width="400"   height="300"   layout="responsive"> </amp-google-vrview-image>

Utilice el atributo de yaw-only para restringir el movimiento al eje de guiñada solamente


Ejemplo


<amp-google-vrview-image src="https://storage.googleapis.com/vrview/examples/coral.jpg"   stereo   yaw-only   width="400"   height="300"   layout="responsive"> </amp-google-vrview-image>



Share:

Related post

Disqus

Disqus comments:


Facebook

Facebook comments: