Skip to content
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

Jump to bottom

Layout update #474

Closed
wants to merge 3 commits into from
Closed

Layout update #474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a7da47
Added new logo for navigation. New layout. Restructured Rendering Sho…
yuinchien Apr 3, 2019
033b14e
Changed copyright year back to 2018. Removed Rendering Showcase from …
yuinchien Apr 4, 2019
1fdffe4
Added back auto-rotate attr to landing demo
yuinchien Apr 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion LICENSE
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@
same "printed page" as the copyright notice for easier
identification within third-party archives.

Copyright 2018 Google
Copyright 2019 Google

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
Expand Down
45 changes: 22 additions & 23 deletions examples/animation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,25 +43,25 @@
<!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->

</head>
<body class="multiple-samples">

<div id="header">
<a class="icon-button icon-return" href="../index.html"></a>
<a class="icon-github icon-button" href="https://github.com/GoogleWebComponents/model-viewer/blob/master/examples/lighting-and-environment.html"></a>
</div>

<div class="center intro">
<h2>Animation</h2>
<h4>This page showcases how you can control models with animations</h4>
</div>
<body>

<div class="sample">
<div class="demo" id="demo-container-1"></div>
<div class="content">

<div id="header">
<a class="icon-button icon-modelviewer" href="../index.html"></a>
<a class="icon-github icon-button" href="https://github.com/GoogleWebComponents/model-viewer/blob/master/examples/lighting-and-environment.html"></a>
</div>

<div class="wrapper">
<div class="index">1</div>
<h2>Automatically play animations with the
<span class="attribute">autoplay</span> attribute</h2>

<div id="intro">
<h3>Animation</h3>
<p>Use &lt;model-viewer&gt; to show off your animated models. This page showcases how you can control models with animations</p>
</div>

<h2 class="demo-title">Automatically play animations with the<span class="attribute">autoplay</span> attribute</h2>
<example-snippet stamp-to="demo-container-1" highlight-as="html">
<template>
<model-viewer
Expand All @@ -80,8 +80,8 @@ <h2>Automatically play animations with the
<div class="demo" id="demo-container-2"></div>
<div class="content">
<div class="wrapper">
<div class="index">2</div>
<h2>Select a specific animation with <span class="attribute">animation-name</span></h2>

<h2 class="demo-title">Select a specific animation with <span class="attribute">animation-name</span></h2>
<example-snippet stamp-to="demo-container-2" highlight-as="html">
<template>
<model-viewer
Expand All @@ -101,8 +101,8 @@ <h2>Select a specific animation with <span class="attribute">animation-name</spa
<div class="demo" id="demo-container-3"></div>
<div class="content">
<div class="wrapper">
<div class="index">3</div>
<h2>Animations crossfade when you change them</h2>

<h2 class="demo-title">Animations crossfade when you change them</h2>
<example-snippet stamp-to="demo-container-3" highlight-as="html">
<template>
<model-viewer
Expand Down Expand Up @@ -134,8 +134,8 @@ <h2>Animations crossfade when you change them</h2>
<div class="demo" id="demo-container-4"></div>
<div class="content">
<div class="wrapper">
<div class="index">4</div>
<h2>A paused model shows the first frame of the configured animation</h2>

<h2 class="demo-title">A paused model shows the first frame of the configured animation</h2>
<example-snippet stamp-to="demo-container-4" highlight-as="html">
<template>
<model-viewer
Expand Down Expand Up @@ -163,9 +163,8 @@ <h2>A paused model shows the first frame of the configured animation</h2>

<div class="footer">
<div class="attribution">
RobotExpressive by <a href="https://www.patreon.com/quaternius">Tomás Laulhé</a>,
licensed under <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>
(<a href="https://github.com/mrdoob/three.js/tree/dev/examples/models/gltf/RobotExpressive">source</a>)
<a href="https://github.com/mrdoob/three.js/tree/dev/examples/models/gltf/RobotExpressive">RobotExpressive</a> by <a href="https://www.patreon.com/quaternius">Tomás Laulhé</a>,
licensed under <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>.
</div>
<div class="copyright">©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.</div>

Expand Down
27 changes: 12 additions & 15 deletions examples/assets/ic_github_black_24dp.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions examples/assets/ic_model_viewer.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions examples/assets/ic_modelviewer.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 changes: 26 additions & 40 deletions examples/augmented-reality.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,6 @@
<link type="text/css" href="styles/examples.css" rel="stylesheet" />
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>

<style>
@media only screen and (max-width: 800px) {
#demo-container {
height: 450px;
}
model-viewer {
padding-top: 60px;
background-color: #222;
}
}
</style>

<!-- The following libraries and polyfills are recommended to maximize browser support -->

<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
Expand All @@ -54,44 +42,43 @@
<!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->

</head>
<body>

<div id="header">
<a class="icon-button icon-return" href="../index.html"></a>
<a class="icon-github icon-button" href="https://github.com/GoogleWebComponents/model-viewer/blob/master/examples/augmented-reality.html"></a>
</div>

<body class="single-example">
<div class="sample">
<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="#222"
ios-src="assets/Astronaut.usdz"
magic-leap
unstable-webxr></model-viewer>
</template>
</example-snippet>
</div>
<div id="demo-container" class="demo"></div>
<div class="content">
<div id="header">
<a class="icon-button icon-modelviewer" href="../index.html"></a>
<a class="icon-github icon-button" href="https://github.com/GoogleWebComponents/model-viewer/blob/master/examples/augmented-reality.html"></a>
</div>
<div class="wrapper">
<div class="center heading">
<h2>Augmented Reality</h2>
<div class="heading">
<h2 class="demo-title">Augmented Reality</h2>
<h4>This demonstrates several augmented reality features, including <span class="attribute">unstable-webxr</span>, <span class="attribute">magic-leap</span> and <span class="attribute">ios-src</span>.</h4>
</div>
<!-- <h4 class="">iOS, Magic Leap & WebXR</h4> -->

<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="#222"
ios-src="assets/Astronaut.usdz"
magic-leap
unstable-webxr></model-viewer>
</template>
</example-snippet>

<h3 style="margin-top: 40px;">iOS, Magic Leap & WebXR</h3>
<ul class="list-attribute">
<li>
<h4>ios-src</h4>
<div>ios-src</div>
<p>Provides augmented reality on supported iOS 12+ devices via AR Quick Look, but requires an additional USDZ model.</p>
</li>
<li>
<h4>magic-leap</h4>
<div>magic-leap</div>
<p>Provides augmented reality on Magic Leap's Helio browser. Requires that the primary model be a GLB file, and the <a href="https://www.npmjs.com/package/@magicleap/prismatic">@magicleap/prismatic</a> library.</p>
</li>
<li>
<h4>unstable-webxr</h4>
<div>unstable-webxr</div>
<p>Provides augmented reality via the experimental <a href="https://immersive-web.github.io/webxr/">WebXR Device API</a>, implemented in Chrome Canary only behind flags. For more information see the <a href="https://codelabs.developers.google.com/codelabs/ar-with-webxr/#1">AR with WebXR Codelab</a>.</p>
</li>
</ul>
Expand All @@ -102,9 +89,8 @@ <h4>unstable-webxr</h4>

<div class="footer">
<div class="attribution">
Astronaut by <a href="https://poly.google.com/user/4aEd8rQgKu2">Poly</a>,
licensed under <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY</a>
(<a href="https://poly.google.com/view/dLHpzNdygsg">source</a>)
<a href="https://poly.google.com/view/dLHpzNdygsg">Astronaut</a> by <a href="https://poly.google.com/user/4aEd8rQgKu2">Poly</a>,
licensed under <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY</a>.
</div>
<div class="copyright">©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.</div>
</div>
Expand Down