111 lines
4.9 KiB
HTML
111 lines
4.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> Multiple Elements</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>
|
|
.demo {
|
|
height: 100vh;
|
|
}
|
|
.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%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="demo">
|
|
<div class="grid">
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (1 of 16)"
|
|
auto-rotate background-color="#40C4FF"></model-viewer>
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (2 of 16)"
|
|
auto-rotate background-color="#455A64"></model-viewer>
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (3 of 16)"
|
|
auto-rotate background-color="#EEFF41"></model-viewer>
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (4 of 16)"
|
|
auto-rotate background-color="#ff5252"></model-viewer>
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (5 of 16)"
|
|
auto-rotate background-color="#651FFF"></model-viewer>
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (6 of 16)"
|
|
auto-rotate background-color="#1DE9B6"></model-viewer>
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (7 of 16)"
|
|
auto-rotate background-color="#FF4081"></model-viewer>
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (8 of 16)"
|
|
auto-rotate background-color="#424242"></model-viewer>
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (9 of 16)"
|
|
auto-rotate background-color="#40C4FF"></model-viewer>
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (10 of 16)"
|
|
auto-rotate background-color="#455A64"></model-viewer>
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (11 of 16)"
|
|
auto-rotate background-color="#EEFF41"></model-viewer>
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (12 of 16)"
|
|
auto-rotate background-color="#ff5252"></model-viewer>
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (13 of 16)"
|
|
auto-rotate background-color="#651FFF"></model-viewer>
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (14 of 16)"
|
|
auto-rotate background-color="#1DE9B6"></model-viewer>
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (15 of 16)"
|
|
auto-rotate background-color="#FF4081"></model-viewer>
|
|
<model-viewer src="../shared-assets/models/Astronaut.glb"
|
|
alt="A 3D model of an astronaut (16 of 16)"
|
|
auto-rotate background-color="#424242"></model-viewer>
|
|
</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>
|