lunarcloud.github.io/3d-showcase.html at main · lunarcloud/lunarcloud.github.io · 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Sam Sarette | 3D Showcase</title>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="theme-color" content="#37c482">

        <link rel="manifest" href="./ssarette-portfolio.webmanifest">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <link rel="stylesheet" href="css/common.css">


        <script src="lib/custom-elements.js"></script> <!-- Safari polyfill -->
    </head>
    <body>
        <main style="height: 100dvh; width: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 12;">
            <div id="vr-content" style="height: 100%; width: 100%;">
                <!-- linthtml-disable attr-name-style, attr-bans -->
                <a-scene embedded vr-mode-ui="enabled: true;" keyboard-shortcuts="enterVR: false" loading-screen="dotsColor: white; backgroundColor: black">
                    <a-entity oculus-touch-controls="hand: left"></a-entity>
                    <a-entity oculus-touch-controls="hand: right"></a-entity>

                    <a-entity   camera          position="0 1.6 0"  enabled
                                look-controls   wasd-controls
                                touchEnabled    mouseEnabled        magicWindowTrackingEnabled
                                pointerLockEnabled="false"></a-entity>

                    <a-assets>
                        <a-asset-item id="meeple-robot" src="gltf/robot.glb"></a-asset-item>
                        <a-asset-item id="meeple-gent1" src="gltf/gent1.glb"></a-asset-item>
                        <a-asset-item id="meeple-lady1" src="gltf/lady1.glb"></a-asset-item>
                        <a-asset-item id="meeple-airship" src="gltf/airship.glb"></a-asset-item>

                        <a-asset-item id="ataito-bucket" src="gltf/ataito-bucket.glb"></a-asset-item>
                        <a-asset-item id="kmc-vr-large-bottle" src="gltf/kmc-vr-large-bottle.glb"></a-asset-item>
                        <a-asset-item id="shipwreck" src="gltf/shipwreck.glb"></a-asset-item>

                        <a-asset-item id="trek-hugo-class-ship" src="gltf/trek/sta-sarelle-expanse-hugo-class-ship.glb"></a-asset-item>
                        <a-asset-item id="trek-starbase-364-narendra-station" src="gltf/trek/starbase-364-narendra-station.glb"></a-asset-item>
                        <a-asset-item id="trek-cetacean" src="gltf/trek/starfleet-cetacean.glb"></a-asset-item>
                        <a-asset-item id="trek-edosian" src="gltf/trek/starfleet-edosian.glb"></a-asset-item>
                        <a-asset-item id="trek-exocomp" src="gltf/trek/starfleet-exocomp.glb"></a-asset-item>
                        <a-asset-item id="trek-medusan" src="gltf/trek/starfleet-medusan-hover-suit.glb"></a-asset-item>
                        <a-asset-item id="trek-phaser" src="gltf/trek/sta-sarelle-phaser.glb"></a-asset-item>

                        <img id="sky" src="img/photosphere/galaxy-sky.jpg" alt="sky">
                    </a-assets>

                    <a-entity text="anchor: center; width: 1.5; color: black; value: Desktop Controls: WASD & Mouse"
                            position="0 0. -2.8" rotation="-90 0 0"></a-entity>

                    <a-entity gltf-model="#meeple-airship" shadow position="-0.75 0.1 -3.25" scale="0.1 0.1 0.1" rotation="0 25 0">
                        <a-entity gltf-model="#meeple-robot" position="1.75 1.6 1" rotation="0 15 0"></a-entity>
                        <a-entity gltf-model="#meeple-lady1" position="0 1.6 1.5" rotation="0 0 0"></a-entity>
                        <a-entity gltf-model="#meeple-gent1" position="-1.75 1.6 1" rotation="0 -15 0"></a-entity>
                    </a-entity>


                    <a-entity position="0.5 0.1 -3.5" scale="0.01 0.01 0.01">
                        <a-light type="point" color="#cc4400" position="30 5 0" intensity="1"></a-light>
                        <a-light type="point" color="#aaaa00" position="-30 5 40" intensity="1"></a-light>
                        <a-entity gltf-model="#trek-cetacean" position="-45 0 40" rotation="0 30 0"></a-entity>
                        <a-entity gltf-model="#trek-edosian" position="-20 0 0" rotation="0 90 0"></a-entity>
                        <a-entity gltf-model="#trek-exocomp" position="0 0 40" rotation="0 -45 0"></a-entity>
                        <a-entity gltf-model="#trek-medusan" position="30 0 0" rotation="0 0 0"></a-entity>
                    </a-entity>

                    <a-entity gltf-model="#trek-phaser" scale="0.5 0.5 0.5" position="1.45 0.125 -3.25" rotation="10 30 80"></a-entity>

                    <a-entity position="3 2 -8" scale="0.025 0.025 0.025" rotation="-15 100 20">
                        <a-entity gltf-model="#trek-hugo-class-ship"
                        animation="property: rotation; from: 0 0 -45; to: 0 0 15; loop: true; dir: alternate; easing: linear; dur: 25000" ></a-entity>
                    </a-entity>

                    <a-entity position="0 5 -25" scale="0.25 0.25 0.25" rotation="15 35 0">
                        <a-entity gltf-model="#trek-starbase-364-narendra-station"
                        animation="property: rotation; from: 0 0 0; to: 0 360 0; loop: true; elasticity:1000; dur: 50000; easing: linear;"></a-entity>
                    </a-entity>

                    <a-entity gltf-model="#ataito-bucket" position="2 0.25 -3.5" scale="0.25 0.25 0.25" rotation="0 45 0"></a-entity>

                    <a-entity gltf-model="#kmc-vr-large-bottle" position="-2 0 -3.5" scale="3 3 3" rotation="0 -45 0"></a-entity>

                    <a-entity position="-5 3.5 -8" scale="1 1 1" rotation="45 45 0">
                        <a-entity gltf-model="#shipwreck" shadow
                        animation="property: rotation; from: 0 0 0; to: 0 -360 0; loop: true; elasticity:1000; dur: 50000; easing: linear;"></a-entity>
                    </a-entity>

                    <a-plane position="0 0 -4.5" rotation="-90 0 0" width="6" height="3.5" color="#61615e"></a-plane>

                    <a-entity light="type: directional; color: #ccc; intensity: 0.4" position="0 1 4" rotation="45 0 0"></a-entity>
                    <a-entity light="type: directional; color: #ccc; intensity: 0.4" position="0 1 -4" rotation="-45 0 0"></a-entity>
                    <a-entity light="type: ambient; color: #ccf; intensity: 1"></a-entity>

                    <!-- <a-sphere src="#sky" side="double" radius="50" rotation="0 -90 0"></a-sphere> -->

                    <a-sky src="#sky" color="#888"></a-sky>
                </a-scene>
                <!-- linthtml-enable attr-name-style, attr-bans -->
            </div>
        </main>
        <div id="content-load-hider" style="position: fixed; top: 0; bottom: 0;left: 0;right: 0; z-index: 11; background-color: black;"></div>

        <nav-header>
            <span slot="about-info">
                <p>An interactive museum of 3d models that Sam has created in both CAD software and Blender.</p>
                <p>Desktop Controls: WASD & Mouse</p>
            </span>
        </nav-header>

        <script type="module" src="controllers/3d-showcase.js"></script>
    </body>
</html>