Novidades dos recursos espaciais para a web

Conheça os recursos espaciais mais recentes para a web no visionOS 26. Abordaremos como exibir modelos 3D em linha usando o novo elemento HTML "model". Além disso, compartilharemos recursos avançados, como iluminação de modelos, interações e animações. Aprenda como incorporar novas mídias imersivas em seu site, como vídeos em 360 graus e Apple Immersive Video. Além disso, confira uma prévia de como adicionar um ambiente personalizado aos seus sites.

Capítulos

0:00 - Introdução
0:55 - Incorporar modelos 3D
21:24 - Incluir mídias imersivas
26:14 - Fornecer um ambiente personalizado

Recursos

Vídeos 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 - Introdução
A equipe visionOS Safari apresenta novos recursos para a web espacial este ano, incluindo renderização de modelos 3D estereoscópicos, reprodução de mídia imersiva e recursos do Developer Preview, como ambientes de sites.
0:55 - Incorporar modelos 3D
A evolução do desenvolvimento para web apresenta o elemento de modelo HTML, possibilitando a incorporação perfeita de modelos 3D em páginas web. Esse novo recurso, que já está disponível por padrão no Safari em visionOS, revoluciona a maneira como os usuários interagem com o conteúdo da web ao oferecer renderização estereoscópica, possibilitando que eles percebam a profundidade e explorem objetos 3D de vários ângulos.
21:24 - Incluir mídias imersivas
O suporte a mídias imersivas em sites foi ampliado, possibilitando a incorporação de vários formatos, como vídeos espaciais, de 180°, 360° e de campo de visão amplo. Com o iPhone 15 Pro ou posterior, os usuários podem gravar vídeos espaciais no próprio app Câmera e assistir a eles no Apple Vision Pro.
26:14 - Fornecer um ambiente personalizado
Há também um novo recurso do Developer Preview para Safari chamado de ambiente de site. Esse recurso permite a criação de ambientes virtuais nos sites usando arquivos USDZ, possibilitando que os visitantes vivenciem ambientes imersivos, como restaurantes, submarinos ou masmorras, mantendo o Safari e o site em exibição. Para implementar esse recurso, você pode usar uma marcação HTML específica, vincular a arquivos USDZ e personalizar os ambientes com IBLs. Esse recurso está em desenvolvimento, portanto, incentivamos todo e qualquer feedback a fim de moldar seu futuro.

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

Novidades dos recursos espaciais para a web

Capítulos

Recursos

Vídeos relacionados

WWDC25

WWDC24

WWDC23