Skip to content

Commit

Permalink
Updated to example-snippet & changed example titles in index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuinchien @cdata
yuinchien authored and cdata committed Jan 31, 2019
1 parent 255b0cc commit c15ac09
Show file tree
Hide file tree
Showing 12 changed files with 438 additions and 395 deletions.
4 changes: 4 additions & 0 deletions examples/assets/ic_get_app_black_24dp.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 5 additions & 7 deletions examples/augmented-reality.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,19 +64,17 @@ <h4><a href="/"><span class="bracket-offset">&lt;</span>model-viewer<span class=
</div>

<div class="sample">
<div class="demo" style="background:#222;">
<!-- <demo-snippet>
<h2>iOS, Magic Leap, WebXR</h2>
<div id="demo-container" class="demo">
<example-snippet stamp-to="demo-container" highlight-as="html">
<template>
<model-viewer src="assets/Astronaut.glb"
alt="A 3D model of an astronaut"
background-color="#3cba54"
background-color="#222"
ios-src="assets/Astronaut.usdz"
magic-leap
unstable-webxr>
</model-viewer>
unstable-webxr></model-viewer>
</template>
</demo-snippet> -->
</example-snippet>
</div>
<div class="content">
<div class="wrapper">
Expand Down
121 changes: 57 additions & 64 deletions examples/background-color.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
</head>
<body class="multiple-samples">

<div id="header" class="wide">
<div id="header">
<h4><a href="/"><span class="bracket-offset">&lt;</span>model-viewer<span class="bracket-offset">&gt;</span></a></h4>
<a class="icon-github" href="https://github.com/GoogleWebComponents/model-viewer/blob/master/examples/background-color.html">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
Expand All @@ -69,91 +69,84 @@ <h4>This page showcases the <span class="attribute">background-color</span> attr
</div>

<div class="sample">
<div class="demo" style="background:#222;">
<!-- <demo-snippet>
<h2>With background-color</h2>
<template>
<model-viewer src="assets/shishkebab.glb"
alt="A 3D model of a shishkebab"
controls auto-rotate background-color="#4885ed"></model-viewer>
</template>
</demo-snippet> -->
</div>
<div id="demo-container-1" class="demo"></div>
<div class="content">
<div class="wrapper">
<div class="index">1</div>
<h2 class="center">With background-color</h2>
<example-snippet stamp-to="demo-container-1" highlight-as="html">
<template>
<model-viewer src="assets/shishkebab.glb"
alt="A 3D model of a shishkebab"
controls auto-rotate background-color="#4885ed"></model-viewer>
</template>
</example-snippet>
</div>
</div>
</div>

<div class="sample">
<div class="demo" style="background:#222;">
<!-- <demo-snippet>
<template>
<style>
.grid {
width: 100%;
height: 600px;
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
}
.grid model-viewer {
width: 100%;
height: 100%;
}
</style>
<div class="grid">
<model-viewer src="assets/Astronaut.glb"
alt="A 3D model of an astronaut (1 of 4)"
auto-rotate background-color="#FF5252"></model-viewer>
<model-viewer src="assets/Astronaut.glb"
alt="A 3D model of an astronaut (2 of 4)"
auto-rotate background-color="#455A64"></model-viewer>
<model-viewer src="assets/Astronaut.glb"
alt="A 3D model of an astronaut (3 of 4)"
auto-rotate background-color="#EEFF41"></model-viewer>
<model-viewer src="assets/Astronaut.glb"
alt="A 3D model of an astronaut (4 of 4)"
auto-rotate background-color="#40C4FF"></model-viewer>
</div>
</template>
</demo-snippet> -->
</div>
<div class="demo" id="demo-container-2"></div>
<div class="content">
<div class="wrapper">
<div class="index">2</div>
<h2 class="center">Multiple elements with background-color</h2>
<example-snippet stamp-to="demo-container-2" highlight-as="html">
<template>
<style>
.grid {
width: 100%;
height: 100%;
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
}
.grid model-viewer {
width: 100%;
height: 100%;
}
</style>
<div class="grid">
<model-viewer src="assets/Astronaut.glb"
alt="A 3D model of an astronaut (1 of 4)"
auto-rotate background-color="#FF5252"></model-viewer>
<model-viewer src="assets/Astronaut.glb"
alt="A 3D model of an astronaut (2 of 4)"
auto-rotate background-color="#455A64"></model-viewer>
<model-viewer src="assets/Astronaut.glb"
alt="A 3D model of an astronaut (3 of 4)"
auto-rotate background-color="#EEFF41"></model-viewer>
<model-viewer src="assets/Astronaut.glb"
alt="A 3D model of an astronaut (4 of 4)"
auto-rotate background-color="#40C4FF"></model-viewer>
</div>
</template>
</example-snippet>
</div>
</div>
</div>

<div class="sample">
<div class="demo" style="background:#222;">
<!-- <demo-snippet>
<template>
<model-viewer
id="toggle-color"
alt="A 3D model of a shishkebab"
src="assets/shishkebab.glb"
controls
auto-rotate>
</model-viewer>
<script>
const colors = ['#4885ed', '#3cba54', '#f4c20d', '#db3236'];
let i = 0;
setInterval(() =>
$('#toggle-color').setAttribute('background-color', colors[i++ % 4]), 2000);
</script>
</template>
</demo-snippet> -->
</div>
<div class="demo" id="demo-container-3"></div>
<div class="content">
<div class="wrapper">
<div class="index">3</div>
<h2 class="center">Changing background color</h2>

<example-snippet stamp-to="demo-container-3" highlight-as="html">
<template>
<model-viewer
id="toggle-color"
alt="A 3D model of a shishkebab"
src="assets/shishkebab.glb"
controls
auto-rotate></model-viewer>
<script>
const colors = ['#4885ed', '#3cba54', '#f4c20d', '#db3236'];
let i = 0;
setInterval(() =>
$('#toggle-color').setAttribute('background-color', colors[i++ % 4]), 2000);
</script>
</template>
</example-snippet>
</div>
</div>
</div>
Expand Down
130 changes: 60 additions & 70 deletions examples/background-image.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
</head>
<body class="multiple-samples">

<div id="header" class="wide">
<div id="header">
<h4><a href="/"><span class="bracket-offset">&lt;</span>model-viewer<span class="bracket-offset">&gt;</span></a></h4>
<a class="icon-github" href="https://github.com/GoogleWebComponents/model-viewer/blob/master/examples/background-image.html">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
Expand All @@ -66,119 +66,109 @@ <h4><a href="/"><span class="bracket-offset">&lt;</span>model-viewer<span class=
</div>

<div class="center heading">
<h3>background-image</h3>
<h2>Background Image</h2>
<h4>This page showcases the <span class="attribute">background-image</span> attribute, which links to an <a href="https://en.wikipedia.org/wiki/Equirectangular_projection">equirectangular projection</a> image, responsible for changing the environment, and environment map applied to the model.</h4>
</div>

<div class="sample">
<div class="demo" style="background:#222;">
<!-- <demo-snippet>
<template>
<model-viewer
controls
background-image="assets/whipple_creek_regional_park_04_1k.jpg"
alt="A 3D model of a damaged helmet with a forest in the background"
src="assets/DamagedHelmet/DamagedHelmet.gltf">
</model-viewer>
</template>
</demo-snippet> -->
</div>
<div class="demo" id="demo-container-1"></div>
<div class="content">
<div class="wrapper">
<div class="index">1</div>
<h2 class="center">With Equirectangular background-image</h2>
<example-snippet stamp-to="demo-container-1" highlight-as="html">
<template>
<model-viewer
controls
background-image="assets/whipple_creek_regional_park_04_1k.jpg"
alt="A 3D model of a damaged helmet with a forest in the background"
src="assets/DamagedHelmet/DamagedHelmet.gltf"></model-viewer>
</template>
</example-snippet>
</div>
</div>
</div>

<div class="sample">
<div class="demo" style="background:#222;">
<!-- <demo-snippet>
<template>
<model-viewer
controls
background-image="assets/small_hangar_01_1k.jpg"
alt="A 3D model of a reflective sphere depicted within a hangar"
src="assets/reflective-sphere.gltf">
</model-viewer>
</template>
</demo-snippet> -->
</div>
<div class="demo" id="demo-container-2"></div>
<div class="content">
<div class="wrapper">
<div class="index">2</div>
<h2 class="center">With very reflective model</h2>
</div>
</div>
</div>

<div class="sample">
<div class="demo" style="background:#222;">
<!-- <demo-snippet>
<example-snippet stamp-to="demo-container-2" highlight-as="html">
<template>
<model-viewer
controls
background-image="assets/whipple_creek_regional_park_04_1k.jpg"
alt="A 3D model of a reflective sphere depicted within a forest"
src="assets/Astronaut.glb">
</model-viewer>
background-image="assets/small_hangar_01_1k.jpg"
alt="A 3D model of a reflective sphere depicted within a hangar"
src="assets/reflective-sphere.gltf"></model-viewer>
</template>
</demo-snippet> -->
</example-snippet>
</div>
</div>
</div>

<div class="sample">
<div class="demo" id="demo-container-3"></div>
<div class="content">
<div class="wrapper">
<div class="index">3</div>
<h2 class="center">With unlit model</h2>
<example-snippet stamp-to="demo-container-3" highlight-as="html">
<template>
<model-viewer
controls
background-image="assets/whipple_creek_regional_park_04_1k.jpg"
alt="A 3D model of a reflective sphere depicted within a forest"
src="assets/Astronaut.glb"></model-viewer>
</template>
</example-snippet>
</div>
</div>
</div>

<div class="sample">
<div class="demo" style="background:#222;">
<!-- <demo-snippet>
<template>
<model-viewer
controls
background-color="#ff0077"
background-image="assets/whipple_creek_regional_park_04_1k.jpg"
alt="A 3D model of a reflective sphere depicted within a forest"
src="assets/reflective-sphere.gltf">
</model-viewer>
</template>
</demo-snippet> -->
</div>
<div class="demo" id="demo-container-4"></div>
<div class="content">
<div class="wrapper">
<div class="index">4</div>
<h2 class="center">With (unused) background-color</h2>
<example-snippet stamp-to="demo-container-4" highlight-as="html">
<template>
<model-viewer
controls
background-color="#ff0077"
background-image="assets/whipple_creek_regional_park_04_1k.jpg"
alt="A 3D model of a reflective sphere depicted within a forest"
src="assets/reflective-sphere.gltf"></model-viewer>
</template>
</example-snippet>
</div>
</div>
</div>

<div class="sample">
<div class="demo" style="background:#222;">
<!-- <demo-snippet>
<template>
<model-viewer
id="toggle-image"
backgroud-color="#ff0077"
src="assets/DamagedHelmet/DamagedHelmet.gltf"
alt="A 3D model of a damaged helmet depicted within changing environments"
controls auto-rotate>
</model-viewer>
<script>
const images = ['assets/whipple_creek_regional_park_04_1k.jpg', 'does-not-exist.png', ''];
let i = 0;
setInterval(() =>
$('#toggle-image').setAttribute('background-image', images[i++ % 3]), 2000);
</script>
</template>
</demo-snippet> -->
</div>
<div class="demo" id="demo-container-5"></div>
<div class="content">
<div class="wrapper">
<div class="index">5</div>
<h2 class="center">Cycling background image</h2>
<example-snippet stamp-to="demo-container-5" highlight-as="html">
<template>
<model-viewer
id="toggle-image"
backgroud-color="#ff0077"
src="assets/DamagedHelmet/DamagedHelmet.gltf"
alt="A 3D model of a damaged helmet depicted within changing environments"
controls auto-rotate></model-viewer>
<script>
const images = ['assets/whipple_creek_regional_park_04_1k.jpg', 'does-not-exist.png', ''];
let i = 0;
setInterval(() =>
$('#toggle-image').setAttribute('background-image', images[i++ % 3]), 2000);
</script>
</template>
</example-snippet>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit c15ac09

Please sign in to comment.