Novedades de la web espacial

Descubre las últimas funcionalidades espaciales para la web en visionOS 26. Abarcaremos cómo mostrar modelos 3D integrados con el nuevo elemento de modelo HTML. Además, compartiremos funciones avanzadas, como la iluminación del modelo, las interacciones y las animaciones. Obtén más información sobre cómo insertar contenido multimedia inmersivo recientemente compatible en tu sitio web, como video de 360 grados y Apple Immersive Video. Y echa una mirada a cómo agregar un entorno personalizado a tus páginas web.

Capítulos

0:00 - Introducción
0:55 - Insertar modelos 3D
21:24 - Presentar contenido multimedia inmersivo
26:14 - Proporcionar un entorno personalizado

Recursos

Videos relacionados

WWDC25

WWDC24

Create custom environments for your immersive apps in visionOS

WWDC23

1:00 - Embed 3D models - Basic syntax
```
<model src="teapot.usdz"></model>
```

4:15 - Embed 3D models with source element

<model>
  <source src="teapot.usdz" type="model/vnd.usdz+zip">
</model>

5:30 - Example server configurations to add USDZ MIME type support

# Apache

```
AddType model/vnd.usdz+zip .usdz
```

# NGINX mime.types

```
types {
  ...
  model/vnd.usdz+zip usdz;
}
```

# Python HTTP server

```
import http.server
Handler = http.server.SimpleHTTPRequestHandle
Handler.extensions_map = { ".usdz": "model/vnd.usdz+zip" }
httpd = http.server.HTTPServer(("", 8000), Handler)
httpd.serve_forever()
```

5:51 - Specify a fall back image for element

<model src="camera.usdz">
  <img src="camera.png">
</model>

6:17 - Example 2D rendering fallback experience

<!-- <model-viewer> library from https://modelviewer.dev/ -->
<script type="module" 
  src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js">
</script>

<model src="camera.usdz">
  <!-- Fallback experience for backward compatibility -->  
  <model-viewer src="camera.glb"></model-viewer>
</model>

6:52 - Detect if the model element is supported

if (window.HTMLModelElement) {
  // Supported by this browser
} else {
  // Not supported by this browser
}

7:32 - Implementing a loading indicator using .ready promise

<model src="camera.usdz" id="mymodel"></model>

<script>
const mymodel = document.getElementById("mymodel");

if (window.HTMLModelElement) {
  mymodel.ready.then(result => {
	// Hide the loading indicator
	// Show the model
 }).catch(error => {
	// Loading error occurred, show a retry button
 });
}
</script>

8:23 - CSS example for setting the color of the virtual space

<body>
  <!-- page content here -->
  <model src="camera.usdz" class="my_model"></model>
</body>

<style>
:root {
  --main-bg-color: rgb(240, 240, 240);
}

body {
  background-color: var(--main-bg-color);
}

.my_model {
  /* set the virtual space color */
  background-color: var(--main-bg-color); 
}
</style>

9:21 - CSS example for frosted glass panel on top of a

<div class="container">
  <model src="camera.usdz"></model>
  <div class="panel"> ... </div>
</div>

<style>
.container {
  position: relative;
}

.panel {
  position: absolute;
  left: 60%;
  backdrop-filter: blur(20px);
  background: linear-gradient(to right,
                              rgba(240, 240, 240, 0.8),
                              rgba(240, 240, 240, 0.5) 4px);
}
</style>

10:56 - Setting image-based lighting (IBL) with environmentmap
```
<model src="camera.usdz" environmentmap="sunset.exr"></model>
```
12:41 - Allowing inline rotation with stagemode
```
<model src="teapot.usdz" stagemode="orbit"></model>
```

13:31 - Customize placement with JavaScript entityTransform

<model src="teapot.usdz" id="mymodel"></model>

<script>
const mymodel = document.getElementById("mymodel");
mymodel.ready.then(result => {
  const matrix = mymodel.entityTransform; // DOMMatrixReadOnly
});
</script>

13:49 - Make the model face right with entityTransform

<model src="teapot.usdz" id="mymodel"></model>
<a onclick="turnRight()">Right</a>

<script>
const mymodel = document.getElementById("mymodel");
function turnRight() {
  const matrix = mymodel.entityTransform; // DOMMatrixReadOnly
  const newMatrix = matrix.rotateAxisAngle(0, 1, 0, 90);
  mymodel.entityTransform = newMatrix;
}
</script>

15:03 - Setting the entityTransform to an identity matrix
```
model.entityTransform = new DOMMatrix();
```

16:31 - Basic animation control

<model src="toy.usdz" id="mymodel" loop autoplay></model>
<button onclick="toggleAnimation()">Play/Pause</button>

<script>
const mymodel = document.getElementById("mymodel");

function toggleAnimation() {
  if (mymodel.paused) {
	mymodel.play();
  } else {
	mymodel.pause();
  }
}
</script>

17:35 - Jump to animation timestamp using .currentTime property

<model src="camera.usdz" id="mymodel"></model>

<script>
const mymodel = document.getElementById("mymodel");

function openFlash() {
  mymodel.currentTime = 1; // Unit is seconds
}

function openScreen() {
  mymodel.currentTime = 3; // Unit is seconds
}
</script>

18:11 - Update .currentTime with a slider

<model src="camera.usdz" id="mymodel"></model>
<input type="range" id="slider" min="2" max="3" step="any" value="2">


<script>
const mymodel = document.getElementById("mymodel");

slider.addEventListener("input", (event) => {
  mymodel.currentTime = event.target.value;
});
</script>

19:35 - Generate USDZ with three.js and display with

import * as THREE from "three";
import { USDZExporter } from "three/examples/exporters/USDZExporter.js";

async function generateModel() {
	const scene = new THREE.Scene();
	// ... create a really nice scene procedurally ...

	const bytes = await new USDZExporter().parseAsync(scene);
	const objURL = URL.createObjectURL(new Blob([bytes]));

	const mymodel = document.getElementById("mymodel");
	mymodel.setAttribute("src", objURL);
}

23:10 - Embed immersive media

<video src="spatial_video.mov"></video>  <!-- Single file -->
<video src="360_video.m3u8"></video>  <!-- HTTP Live Streaming -->

24:25 - Going full screen with Javascript for

<video src="360_video.m3u8" id="player" controls></video>

<script>
const player = document.getElementById("player");
player.requestFullScreen();
</script>

24:35 - Embed panoramas and offer full screen with Javascript

<picture>
  <source media="(max-width: 799px)" srcset="thumbnail.jpg">
  <source media="(min-width: 800px)" srcset="panorama.jpg">
  <img src="panorama.jpg" id="pano">
</picture>
    
<script>
const pano = document.getElementById("pano");
pano.requestFullScreen();
</script>

24:57 - Embed spatial photos and offer full screen with Javascript

<img src="spatial.heic" id="img">
  
<script>
const img = document.getElementById("img");
img.requestFullScreen();
</script>

25:21 - Embed spatial photos with the new "controls" attribute
```
<img src="spatial.heic" id="img" controls>
```

26:49 - Provide a custom environment

<link rel="spatial-backdrop" href="office.usdz" environmentmap="lighting.hdr">

0:00 - Introducción
El equipo de Safari de visionOS presenta nuevas funcionalidades para la web espacial este año, como el renderizado de modelos 3D estereoscópicos, la reproducción multimedia envolvente y funcionalidades de vista previa para desarrolladores, como entornos de sitios web.
0:55 - Insertar modelos 3D
La evolución del desarrollo web presenta el elemento de modelo HTML, que permite la integración de modelos 3D directamente en las páginas web. Esta nueva funcionalidad, ahora disponible en Safari en visionOS, revoluciona la forma en que se interactúa con el contenido web al brindar un renderizado estereoscópico, que permite percibir la profundidad y explorar objetos 3D desde varios ángulos.
21:24 - Presentar contenido multimedia inmersivo
Se amplía la compatibilidad con experiencias multimedia envolventes en sitios web, lo que te permite incorporar diversos formatos, como videos espaciales, de 180 grados, de 360 grados y de campo de visión amplio. Con el iPhone 15 Pro o posterior, los usuarios pueden capturar videos espaciales directamente desde la app Cámara y verlos en el Apple Vision Pro.
26:14 - Proporcionar un entorno personalizado
También hay una nueva funcionalidad de vista previa para desarrolladores en Safari llamada Website environment. Esta funcionalidad permite crear entornos virtuales con archivos USDZ, lo que permite a los visitantes experimentar entornos envolventes, como restaurantes, submarinos o calabozos, mientras tienen Safari y el sitio web a la vista. Puedes implementar esta funcionalidad con un marcado HTML específico, vinculando a archivos USDZ y personalizando los entornos con IBL. La funcionalidad se encuentra en desarrollo y se agradecen los comentarios para mejorarla.

Explore Get Started

Stay Updated

Explore Platforms

Featured

Explore Technologies

Featured

Explore Community

Featured

Explore Documentation

Release Notes

Explore Downloads

Featured

Explore Support

Featured

Quick Links

Novedades de la web espacial

Capítulos

Recursos

Videos relacionados

WWDC25

WWDC24

WWDC23