MrPlatnum
/
Bachelorarbeit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Bachelorarbeit/packages/modelviewer.dev/index.html

243 lines
11 KiB
HTML
Raw Permalink Blame History

<!--
/* @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>&lt;model-viewer&gt;</title>
<meta charset="utf-8">
<meta name="description" content="Easily display interactive 3D models on the web and in AR">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:card" content="player"/>
<meta name="twitter:site" content="modelviewer"/>
<meta name="twitter:player:width" content="480"/>
<meta name="twitter:player:height" content="480"/>
<meta name="twitter:player" content="https://modelviewer.dev/examples/twitter/player.html?src=https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb&poster=https://modelviewer.dev/shared-assets/models/NeilArmstrong.webp&alt=Neil%20Armstrong%27s%20Spacesuit%20from%20the%20Smithsonian%20Digitization%20Programs%20Office%20and%20National%20Air%20and%20Space%20Museum&environmentImage=https://modelviewer.dev/shared-assets/environments/moon_1k.hdr"/>
<meta property="og:title" content="3D model-viewer embed"/>
<meta property="og:description" content="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum"/>
<meta property="og:image" content="https://modelviewer.dev/shared-assets/models/NeilArmstrongTwitter.png"/>
<link type="text/css" href="styles/examples.css" rel="stylesheet" />
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<script defer src="https://web3dsurvey.com/collector.js"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-169901325-1', { 'storage': 'none' });
ga('set', 'referrer', document.referrer.split('?')[0]);
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<style>
.demo model-viewer {
background-color: #fff;
}
</style>
</head>
<body>
<div class="sample">
<div id="demo-container" class="demo"></div>
<div class="content">
<div class="wrapper">
<div class="heading">
<div class="lockup zero-interaction"><div class="icon-button icon-modelviewer-black"></div><h1><span class="attribute">&lt;model-viewer&gt;</span></h1></div>
<h3 class="slogan" style="font-weight:400;">Easily display interactive 3D models on the web & in AR</h3>
</div>
<div id="section-quick-start">
<h3 class="grouping-title grouping-title-new quick-start">Quick Start</h3>
<div class="quick-start-example">
<example-snippet inert-script stamp-to="demo-container" highlight-as="html">
<template>
<!-- Import the component -->
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" src="shared-assets/models/NeilArmstrong.glb" ar environment-image="shared-assets/environments/moon_1k.hdr" poster="shared-assets/models/NeilArmstrong.webp" shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>
</template>
</example-snippet>
</div>
</div>
<a href="https://bundlephobia.com/result?p=@google/model-viewer">
<img src="https://badgen.net/bundlephobia/minzip/@google/model-viewer" alt="Min Zip" />
</a>
<a href="https://github.com/google/model-viewer/releases">
<img src="https://img.shields.io/github/v/release/google/model-viewer" alt="Latest Release" />
</a>
<a href="https://www.npmjs.com/package/@google/model-viewer">
<img src="https://img.shields.io/npm/v/@google/model-viewer" alt="NPM Package" />
</a>
<br />
<a href="https://twitter.com/intent/follow?screen_name=modelviewer">
<img src="https://img.shields.io/twitter/follow/modelviewer?style=social&logo=twitter" alt="follow on Twitter" />
</a>
<a href="https://github.com/google/model-viewer/discussions">
<img src="https://img.shields.io/github/stars/google/model-viewer.svg?style=social&label=Star&maxAge=2592000" alt="Github Discussions" />
</a>
<div id="section-editor">
<h3 class="grouping-title grouping-title-new border-bottom">Getting Started</h3>
<ol class="new-list-example">
<li>
<h4>
<a href="docs/faq.html">FAQ</a>: Introduction &amp; much more
</h4>
</li>
<li>
<h4>
<a href="editor">Editor</a>: Test your 3D models and download a starter website
</h4>
</li>
</ol>
</div>
<div id="section-documentation">
<h3 class="grouping-title grouping-title-new border-bottom">Documentation</h3>
<ol class="new-list-example">
<li>
<h4>
<a href="examples/augmentedreality/index.html">Examples</a>: Advanced usage
</h4>
</li>
<li>
<h4>
<a href="docs/index.html">API Reference</a>
</h4>
</li>
</ol>
</div>
<div id="section-addons">
<h3 class="grouping-title grouping-title-new border-bottom">Addons</h3>
<ol class="new-list-example">
<h4 class="group-title-new border-bottom">
<p class="attribute">&lt;model-viewer-effects&gt;</p>
<a href="https://bundlephobia.com/result?p=@google/model-viewer-effects">
<img src="https://badgen.net/bundlephobia/minzip/@google/model-viewer-effects" alt="Min Zip" />
</a>
<a href="https://www.npmjs.com/package/@google/model-viewer-effects">
<img src="https://img.shields.io/npm/v/@google/model-viewer-effects" alt="Latest Release" />
</a>
</h4>
<li>
<h4>
<a href="examples/postprocessing/index.html">Examples</a>
</h4>
</li>
<li>
<h4>
<a href="docs/mve.html">API Reference</a>
</h4>
</li>
</ol>
</div>
<div id="section-browser-support">
<h3 class="grouping-title grouping-title-new border-bottom">Browser Support</h3>
<p class="browser-support-desc"><code>&lt;model-viewer&gt;</code> is supported on the last two major versions of all evergreen
desktop and mobile browsers, plus the last two versions of Safari (on MacOS and iOS).</p>
<p class="browser-support-desc">These browser features are
only needed if you wish to use webxr in ar-modes:</p>
<table class="browser-support">
<tr>
<th>Feature</th>
<th><img class="logo-chrome" title="Chrome" alt="Chrome"></th>
<th><img class="logo-canary" title="Canary" alt="Canary"></th>
<th><img class="logo-safari" title="Safari" alt="Safari"></th>
<th><img class="logo-firefox" title="Firefox" alt="Firefox"></th>
<th><img class="logo-edge" title="Edge" alt="Edge"></th>
<th><img class="logo-samsung" title="Samsung Internet" alt="Samsung Internet"></th>
</tr>
<tr>
<td>WebXR Device API</td>
<td><img class="icon-check" alt="icon-check"></td>
<td><img class="icon-check" alt="icon-check"></td>
<td><img class="icon-na" alt="icon-na"></td>
<td><img class="icon-na" alt="icon-na"></td>
<td><img class="icon-check" alt="icon-check"></td>
<td><img class="icon-check" alt="icon-check"></td>
</tr>
<tr>
<td>WebXR HitTest API</td>
<td><img class="icon-check" alt="icon-check"></td>
<td><img class="icon-check" alt="icon-check"></td>
<td><img class="icon-na" alt="icon-na"></td>
<td><img class="icon-na" alt="icon-na"></td>
<td><img class="icon-check" alt="icon-check"></td>
<td><img class="icon-check" alt="icon-check"></td>
</tr>
<tr>
<td>WebXR DOM Overlay API</td>
<td><img class="icon-check" alt="icon-check"></td>
<td><img class="icon-check" alt="icon-check"></td>
<td><img class="icon-na" alt="icon-na"></td>
<td><img class="icon-na" alt="icon-na"></td>
<td><img class="icon-check" alt="icon-check"></td>
<td><img class="icon-check" alt="icon-check"></td>
</tr>
</table>
<div id="browser-support-icon-group">
<div class="icon-desc"><img class="size-24 icon-check" alt="icon-check"><div>Natively supported</div></div>
<div class="icon-desc"><img class="size-24 icon-warning" alt="icon-warning"><div>Available with polyfill</div></div>
<div class="icon-desc"><img class="size-24 icon-flag" alt="icon-flag"><div>Behind a flag, unstable</div></div>
<div class="icon-desc"><img class="size-24 icon-na" alt="icon-na"><div>Not available</div></div>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
</div>
<div class="footer">
<ul>
<li class="attribution">
<a href="https://3d.si.edu/object/3d/neil-armstrong-spacesuit:d8c63ba6-4ebc-11ea-b77f-2e728ce88125">Neil Armstrong Space Suit</a>
provided by the Smithsonian Digitization Programs Office and the National Air and Space Museum; <a href=https://www.si.edu/Termsofuse>Usage Conditions Apply</a>.
</li>
</ul>
<div style="margin-top:24px;" class="copyright">©Copyright 2018-2025 Google Inc. Licensed under the Apache License 2.0.</div>
<div id='footer-links'></div>
</div>
<script type="module" src="./examples/built/docs-and-examples.js">
</script>
<script type="module">
(() => { initFooterLinks();})();
</script>
<!-- Documentation-specific dependencies: -->
<script type="module"
src="examples/built/dependencies.js">
</script>
<!-- Loads <model-viewer> on modern browsers: -->
<script type="module"
src="../../node_modules/@google/model-viewer/dist/model-viewer.js">
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink