forked from google/model-viewer
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add everything to docs.json * hide subcategories of sections not in view * added normal files over sans things like loading/model format * add model formats to loading * added sticky header to examples * rough fix for sidebar reflowing * change defaults to object instead of list
- Loading branch information
1 parent
f057f7a
commit b974dc7
Showing
16 changed files
with
2,687 additions
and
127 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
164 changes: 164 additions & 0 deletions
164
packages/modelviewer.dev/examples/annotations/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
| <!-- | ||
| /* @license | ||
| * Copyright 2020 Google Inc. All Rights Reserved. | ||
| * Licensed under the Apache License, Version 2.0 (the 'License'); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an 'AS IS' BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
| --> | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title><model-viewer> Annotations</title> | ||
| <meta charset="utf-8"> | ||
| <meta name="description" content="<model-viewer> annotation examples"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link type="text/css" href="../../styles/examples.css" rel="stylesheet" /> | ||
| <link type="text/css" href="../../styles/docs.css" rel="stylesheet" /> | ||
| <link rel="shortcut icon" type="image/png" href="../../assets/favicon.png"/> | ||
| <script src="../../node_modules/resize-observer-polyfill/dist/ResizeObserver.js"></script> | ||
|
|
||
| <!-- The following libraries and polyfills are recommended to maximize browser support --> | ||
|
|
||
| <!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 --> | ||
| <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> | ||
|
|
||
| <!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 --> | ||
| <script src="../../node_modules/intersection-observer/intersection-observer.js"></script> | ||
|
|
||
| <!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers --> | ||
| <script src="../../node_modules/resize-observer-polyfill/dist/ResizeObserver.js"></script> | ||
|
|
||
| <!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types --> | ||
| <script src="../../node_modules/focus-visible/dist/focus-visible.js" defer></script> | ||
|
|
||
| </head> | ||
| <body> | ||
|
|
||
| <div class="examples-page"> | ||
| <div class="sidebar" id="sidenav"></div> | ||
| <div id="toggle"></div> | ||
| <div class="examples-container"> | ||
| <div class="sample"> | ||
| <div id="demo-container-1" class="demo"></div> | ||
| <div class="content"> | ||
| <div class="wrapper"> | ||
| <h4 id="intro"><span class="font-medium">Annotations. </span></h4> | ||
| <p> | ||
| Use <model-viewer> to make your models interactive. | ||
| This page showcases how you can add hotspots to your scene. Child elements are hotspots if their slot begins with "hotspot". | ||
| The data-position attribute specifies the 3D position of the hotspot in model coordinates, using the same format as the | ||
| camera-target attribute. The data-normal attribute specifies the normal vector defining the "front" of the hotspot. | ||
| When this normal is pointed away from the viewer, the hotspot's opacity becomes --min-hotspot-opacity. The | ||
| <a href="tester.html">interactive example</a> lets you drag and drop your own models and add hotspots by clicking | ||
| and displays the corresponding position and normal attributes which you can copy into your own page. | ||
| </p> | ||
| <p> | ||
| You can also specify an attribute to be toggled when the hotspot changes between hidden and visible with data-visibility-attribute. | ||
| For example, if you set data-visibility-attribute="visible", then <model-viewer> will toggle the data-visible attribute on | ||
| that hotspot element. This makes it easier to write CSS that styles a hotspot based on its visibility. | ||
| </p> | ||
| <p> | ||
| When a hotspot's visibility changes, it will dispatch a "hotspot-visibility" event, and event.detail.visible will be true or false | ||
| depending on whether the hotspot is facing the camera. | ||
| </p> | ||
| <div class="heading"> | ||
| <h2 class="demo-title">Add hotspots</h2> | ||
| <h4></h4> | ||
| </div> | ||
| <example-snippet stamp-to="demo-container-1" highlight-as="html"> | ||
| <template> | ||
| <style> | ||
| button{ | ||
| display: block; | ||
| width: 20px; | ||
| height: 20px; | ||
| border-radius: 10px; | ||
| border: none; | ||
| background-color: blue; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| button[slot="hotspot-hand"]{ | ||
| --min-hotspot-opacity: 0; | ||
| background-color: red; | ||
| } | ||
|
|
||
| button[slot="hotspot-foot"]:not([data-visible]) { | ||
| background-color: transparent; | ||
| border: 3px solid blue; | ||
| } | ||
|
|
||
| #annotation{ | ||
| background-color: #888888; | ||
| position: absolute; | ||
| transform: translate(10px, 10px); | ||
| border-radius: 10px; | ||
| padding: 10px; | ||
| } | ||
| /* This keeps child nodes hidden while the element loads */ | ||
| :not(:defined) > * { | ||
| display: none; | ||
| } | ||
| </style> | ||
| <model-viewer id="hotspot-demo" ar ar-modes="webxr" camera-controls src="../../shared-assets/models/Astronaut.glb" style="--poster-color:#ffffff00;" alt="A 3D model of an astronaut."> | ||
| <button slot="hotspot-visor" data-position="0 1.75 0.35" data-normal="0 0 1"></button> | ||
| <button slot="hotspot-hand" data-position="-0.54 0.93 0.1" data-normal="-0.73 0.05 0.69"> | ||
| <div id="annotation">This hotspot disappears completely</div> | ||
| </button> | ||
| <button slot="hotspot-foot" data-position="0.16 0.1 0.17" data-normal="-0.07 0.97 0.23" data-visibility-attribute="visible"></button> | ||
| <div id="annotation">This annotation is fixed in screen-space</div> | ||
| </model-viewer> | ||
| </template> | ||
| </example-snippet> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="footer"> | ||
| <ul> | ||
| <li class="attribution"> | ||
| <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>. | ||
| </li> | ||
| </ul> | ||
| <div style="margin-top:24px;" class="copyright">©Copyright 2019 Google Inc. Licensed under the Apache License 2.0.</div> | ||
| <div><a href="https://github.com/google/model-viewer">Github</a> ∙ <a href="https://model-viewer.glitch.me/">Glitch</a> ∙ <a href="https://github.com/google/model-viewer/issues">Bug report</a></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script type="module" src="../../examples/built/docs-and-examples.js"> | ||
| </script> | ||
| <script type="module"> | ||
| (() => { init('examples-annotations'); })(); | ||
| </script> | ||
|
|
||
|
|
||
| <!-- Documentation-specific dependencies: --> | ||
| <script type="module" | ||
| src="../built/dependencies.js"> | ||
| </script> | ||
| <script nomodule | ||
| src="../built/dependencies-legacy.js"> | ||
| </script> | ||
|
|
||
| <!-- Loads <model-viewer> only on modern browsers: --> | ||
| <script type="module" | ||
| src="../../node_modules/@google/model-viewer/dist/model-viewer.js"> | ||
| </script> | ||
|
|
||
| <!-- Loads <model-viewer> only on old browsers like IE11: --> | ||
| <script nomodule | ||
| src="../../node_modules/@google/model-viewer/dist/model-viewer-legacy.js"> | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.