TryWeb3D/index.html at master · Code-Block-Init/TryWeb3D · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>&lt;model-viewer&gt; codelab</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="ashumeow">
    <link rel="stylesheet" href="demo-styles.css">
	<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
	<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
	<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>
  </head>
<body>
  <p>Adding 3D Models to the Web with &lt;model-viewer&gt; google codelab! <a href="https://github.com/ashumeow">@ashumeow</a></p>

<model-viewer src="third_party/Astronaut/Astronaut.glb" auto-rotate camera-controls
              alt="A 3D model of an astronaut">
</model-viewer>

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              auto-rotate camera-controls
              background-color="#70BCD1"
              shadow-intensity="1"
              camera-orbit="-20deg 75deg 2m"
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

<script type="module"
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>
<script nomodule
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>
</body>
</html>