Skip to content

Initial suite of samples #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Initial suite of samples #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cf4a0ea
Initial suite of samples
zachernuk Apr 24, 2025
befb812
Addressing @mkeblx's feedback!
zachernuk May 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitattributes
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
*.usdz filter=lfs diff=lfs merge=lfs -text
*.glb filter=lfs diff=lfs merge=lfs -text
*.hdr filter=lfs diff=lfs merge=lfs -text
*.jpg filter=lfs diff=lfs merge=lfs -text
36 changes: 36 additions & 0 deletions autoplay-loop.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Model autoplay test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Model: Autoplay and loop test</h1>

<hr />
<p>
If a model contains an animation track, it will be available to play once
the model has loaded. <code>autoplay</code> will trigger the playback
automatically, and <code>loop</code> will loop the content, irrespective
of whether the playback was started via the JavaScript
<code>play()</code> or the attribute.
</p>

<pre>
&lt;model autoplay loop alt="A model of a teapot with a hidden creature"&gt;
&lt;source src="./teapot.usdz" type="model/vnd.usdz+zip" /&gt;
&lt;source src="./teapot.glb" type="model/gltf-binary" /&gt;
&lt;/model&gt;
</pre
>
<br />
<model autoplay loop alt="A model of a teapot with a hidden creature">
<source src="./teapot.usdz" type="model/vnd.usdz+zip" />
<source src="./teapot.glb" type="model/gltf-binary" />
<img src="./teapot-fallback-animated.jpg" alt="An image of a model of a teapot with a creature inside" >
</model>
</body>
</html>
71 changes: 71 additions & 0 deletions autorotate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Model auto-rotate</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Model: auto-rotate test</h1>
<hr />
<p>
A model's <code>DOMMatrixReadOnly entityTransform</code> can be set to
display a certain side, or to automatically animate the content.
</p>

<h2>HTML</h2>
<pre>
&lt;model alt="A model of a teapot"&gt;
&lt;source src="./teapot.usdz" type="model/vnd.usdz+zip" /&gt;
&lt;source src="./teapot.glb" type="model/gltf-binary" /&gt;
&lt;/model&gt;
</pre
>
<h2>JavaScript:</h2>
<pre>
let initialTransform;
const model = document.querySelector('model');
await model.ready;
initialTransform = model.entityTransform.translate(0,0,-0.05);
requestAnimationFrame(update);

function update() {
try {
const angleY = performance.now()/10;
model.entityTransform = initialTransform.rotate(0, angleY,0);
} catch(error) {
console.warn("failed to set transform", error);
}
requestAnimationFrame(update);
}
</pre
>

<br />

<model alt="A model of a teapot">
<source src="./teapot.usdz" type="model/vnd.usdz+zip" />
<source src="./teapot.glb" type="model/gltf-binary" />
<img src="./teapot-fallback-black.jpg" alt="An image of a model of a teapot" >
</model>
</body>
<script type="module">
let initialTransform;
const model = document.querySelector('model');
await model.ready;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some samples like here use the more ~legacy fact that HTML element with ID x shows up window.x, while others do not. Can we always explicitly reference the element via a selector?

initialTransform = model.entityTransform.translate(0, 0, -0.05);
requestAnimationFrame(update);

function update() {
try {
const angleY = performance.now() / 10;
model.entityTransform = initialTransform.rotate(0, angleY, 0);
} catch (error) {
console.warn("failed to set transform", error);
}
requestAnimationFrame(update);
}
</script>
</html>
53 changes: 53 additions & 0 deletions background.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Model: Background color test</title>
<link rel="stylesheet" href="style.css" />
<style>
model {
width: 400px;
height: 400px;
background-color: blue;
}
pre {
background-color: rgb(213, 213, 213);
display: inline-block;
padding: 10px;
}
</style>
</head>
<body>
<h1>Model: Background color test</h1>
<p>
Set the background with CSS. Note that because the model exists in a plane
conceptually <em>behind</em> the page, it is not recommended to support a
transparent background.
</p>
<hr />
<h2>HTML</h2>
<pre>
&lt;model alt="A model of a teapot"&gt;
&lt;source src="./teapot.usdz" type="model/vnd.usdz+zip" /&gt;
&lt;source src="./teapot.glb" type="model/gltf-binary" /&gt;
&lt;/model&gt;
</pre
>
<h2>CSS</h2>
<pre>
model {
background-color:blue;
}
</pre
>

<model alt="A model of a teapot">
<source src="./teapot.usdz" type="model/vnd.usdz+zip" />
<source src="./teapot.glb" type="model/gltf-binary" />
<img src="./teapot-fallback-blue.jpg" alt="An image of a model of a teapot on a blue background" >

</model>
</body>
</html>
41 changes: 41 additions & 0 deletions basic-blob-url.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Model: basic Blob URL test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Model: Basic Blob URL test overriding type</h1>
<hr />

<h2>HTML</h2>
<pre>
&lt;model alt="A model of a teapot" data-src="./teapot.usdz" data-type="model/vnd.usdz+zip"&gt;
&lt;/model&gt;
</pre>
<h2>JavaScript</h2>
<pre>
const model = document.querySelector('model');
const {src, type} = model.dataset;
const bytes = await (await fetch(src)).bytes();
const srcString = URL.createObjectURL(new Blob([bytes], {type}));
model.setAttribute('src', srcString);
</pre>

<model draggable="true" alt="A model of a teapot" data-type="model/vnd.usdz+zip" data-src="./teapot.usdz">
<img src="./teapot-fallback-black.jpg" alt="An image of a model of a teapot" >
</model>
</body>


<script type="module">
const model = document.querySelector('model');
const {src, type} = model.dataset;
const bytes = await (await fetch(src)).bytes();
const srcString = URL.createObjectURL(new Blob([bytes], {type}));
model.setAttribute('src', srcString);
</script>
</html>
27 changes: 27 additions & 0 deletions basic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Model: basic test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Model: Basic test</h1>
<hr />
<pre>
&lt;model alt="A model of a teapot"&gt;
&lt;source src="./teapot.usdz" type="model/vnd.usdz+zip" /&gt;
&lt;source src="./teapot.glb" type="model/gltf-binary" /&gt;
&lt;/model&gt;
</pre
>

<model alt="A model of a teapot">
<source src="./teapot.usdz" type="model/vnd.usdz+zip" />
<source src="./teapot.glb" type="model/gltf-binary" />
<img src="./teapot-fallback-black.jpg" alt="An image of a model of a teapot" >
</model>
</body>
</html>
43 changes: 43 additions & 0 deletions boundingbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Model: Bounding-box information</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Model: Bounding-box information</h1>
<hr />
<p>
after <code>model.ready</code> promise is resolved, a model can report its
<code>DOMPoint boundingBoxExtents</code> and
<code>DOMPoint boundingBoxCenter</code>.
</p>

<model alt="A model of a teapot">
<source src="./teapot.usdz" type="model/vnd.usdz+zip" />
<source src="./teapot.glb" type="model/gltf-binary" />
<img src="./teapot-fallback-black.jpg" alt="An image of a model of a teapot" >
</model>
<br />
<h2>Report:</h2>
<div id="log"></div>
</body>

<script type="module">
function writePoint(pt) {
return `x: ${pt.x}, y: ${pt.y}, z: ${pt.z}`;
}

const model = document.querySelector("model");
await model.ready;

const log = document.getElementById("log");
log.innerHTML = `bounding box center: ${writePoint(
model.boundingBoxCenter
)} <br/>
bounding box extents: ${writePoint(model.boundingBoxExtents)}`;
</script>
</html>
39 changes: 39 additions & 0 deletions currenttime.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Model: currentTime test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Model: currentTime test</h1>
<hr />
<p>
When a model has an animation, its <code>currentTime</code> attribute can
be read and written to update the animation's progress.
</p>
<h2>JavaScript</h2>
<pre>model.currentTime = 2.5;</pre>

<model alt="A model of a teapot with a hidden creature">
<source src="./teapot.usdz" type="model/vnd.usdz+zip" />
<source src="./teapot.glb" type="model/gltf-binary" />
<img src="./teapot-fallback-animated.jpg" alt="An image of a model of a teapot with a creature inside" >
</model>
<br />
Current time:
<span id="timelabel"></span>
<input type="range" min="0" max="1" value="0" step="0.02" id="time" />
</body>

<script type="module" >
const model = document.querySelector("model");
await model.ready;
time.addEventListener("input", (e) => {
timelabel.innerHTML = (time.value * model.duration).toFixed(1) + "s";
model.currentTime = time.value * model.duration;
});
</script>
</html>
56 changes: 56 additions & 0 deletions ibl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Model: IBL test</title>
<style>
html {
color: rgb(221, 221, 221);
background-color: rgb(55, 55, 55);
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding:20px;
max-width:1024px;
}


model, model img {
width: 400px;
background-color: rgb(55, 55, 55);
height: 400px;
}
pre {
background-color: rgb(102, 102, 102);
display: inline-block;
padding: 10px;
}
</style>
</head>
<body>
<h1>Model: IBL test</h1>
<hr>
<p>
Use of the <code>environmentmap</code> attribute to set a custom image-based light (IBL) resource.
Note that while the resource may be an image in any format, the dynamic range requirements for an IBL
mean that it is strongly recommended to use a raw, high-dynamic range (HDR) format like
the Radiance RGBE <code>.hdr</code> format, or the OpenEXR <code>.exr</code> format. Resources are assumed
to be presented in the equirectangular projection.
</p>
<pre>
&lt;model environmentmap="night.hdr" alt="a teapot in a dark environment"&gt;
&lt;source src="./teapot.usdz" type="model/vnd.usdz+zip" /&gt;
&lt;source src="./teapot.glb" type="model/gltf-binary" /&gt;
&lt;img src="./teapot-fallback-ibl.jpg" alt="An image of a model of a teapot lit by a dark environment" &gt;
&lt;/model&gt;
</pre>
<br />
<h2>Result</h2>

<model environmentmap="night.hdr" alt="a teapot in a dark environment">
<source src="./teapot.usdz" type="model/vnd.usdz+zip" />
<source src="./teapot.glb" type="model/gltf-binary" />
<img src="./teapot-fallback-ibl.jpg" alt="An image of a model of a teapot lit by a dark environment" >
</model>
</body>
</html>
Loading