88 lines
4.2 KiB
HTML
88 lines
4.2 KiB
HTML
<!--
|
|
/* @license
|
|
* Copyright 2018 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> List of Models</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link type="text/css" href="../styles/examples.css" rel="stylesheet" />
|
|
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"/>
|
|
|
|
<!-- The following libraries and polyfills are recommended to maximize browser support -->
|
|
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="sample">
|
|
<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/google/model-viewer/blob/master/examples/rendering-showcase.html"></a>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
|
|
<h2 class="demo-title">Shows how <model-viewer> optimizes rendering only elements
|
|
that are visible in the viewport.</h2>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="demo" style="background-color: #222; flex-direction: column; height: 400vh;">
|
|
<model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (1 of 13)"></model-viewer>
|
|
<model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (2 of 13)"></model-viewer>
|
|
<model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (3 of 13)"></model-viewer>
|
|
<model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (4 of 13)"></model-viewer>
|
|
<model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (5 of 13)"></model-viewer>
|
|
<model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (6 of 13)"></model-viewer>
|
|
<model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (7 of 13)"></model-viewer>
|
|
<model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (8 of 13)"></model-viewer>
|
|
<model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (9 of 13)"></model-viewer>
|
|
<model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (10 of 13)"></model-viewer>
|
|
<model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (11 of 13)"></model-viewer>
|
|
<model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (12 of 13)"></model-viewer>
|
|
<model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (13 of 13)"></model-viewer>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<div 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>.
|
|
</div>
|
|
<div class="copyright">©Copyright 2018-2025 Google Inc. Licensed under the Apache License 2.0.</div>
|
|
</div>
|
|
|
|
|
|
<!-- Documentation-specific dependencies: -->
|
|
<script type="module"
|
|
src="./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>
|