95 lines
2.9 KiB
HTML
95 lines
2.9 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> Rendering Showcase</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"/>
|
|
|
|
|
|
|
|
<style>
|
|
.grid {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template-rows: 1fr 2fr 3fr 4fr;
|
|
grid-template-columns: 1fr 2fr 3fr 4fr;
|
|
}
|
|
.grid model-viewer {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
</style>
|
|
</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">
|
|
|
|
<div id="intro">
|
|
<h3>Rendering Showcase</h3>
|
|
<p>A <model-viewer> rendering quality and stress test. Checkout more tests: <a href="./list.html" >List of Elements</a> and <a href="./pbr.html">Physically Based Rendering w/ HDR Environments & Radiance Maps</a>.</p>
|
|
</div>
|
|
|
|
<h2 class="demo-title">Demonstrates how <model-viewer> is capable of rendering
|
|
many simultaneously visible models at once</h2>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="demo">
|
|
<iframe name="demo-iframe" src="./multiple-elements.html"></iframe>
|
|
</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>
|