fitt-webar/ForceTek.html at master · Uqido/fitt-webar · 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en" class="fullscreen-100">

<head>
    <meta charset="utf-8">
    <title>ForceTek</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="white" />
    <meta name="description" content="">

    <script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>


    <script src="https://unpkg.com/fullscreen-polyfill/dist/fullscreen.polyfill.js"></script>

    <script src="https://unpkg.com/focus-visible/dist/focus-visible.js" defer></script>
    <script src="https://unpkg.com/event-target@latest/min.js"></script>
    <script src="https://unpkg.com/resize-observer-polyfill@1.5.0/dist/ResizeObserver.global.js"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

    <style>
        .color-button {
            width: 30px;
            height: 30px;
            margin-top: 5px;
            background-color: white;
            border-radius: 50%;
        }

        .unselectable {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            pointer-events: none;
        }

        .color-button.selected {
            border: 2px solid #717171;
        }
    </style>

</head>

<body class="fullscreen-100">
    <model-viewer id="modelViewer" class='model-viewer' ar autoplay camera-controls src='models/ForceTek.glb'
        ios-src='models/ForceTek.usdz' alt='' noloop camera-orbit="-120deg 55deg 80%" min-camera-orbit="auto auto 160%"
        environment-image="img/whipple_creek_regional_park_04_1k.hdr"
        camera-target="-20cm 0 0" exposure="1" shadow-intensity="1.5" shadow-softness="0.8"
        quick-look-browsers="safari chrome">
        <script src="js/LoadingBar.js"></script>

        <div class="unselectable" id="hotspot-Couplings" slot="hotspot-Couplings" data-position="-0.232 0.043 0.223"
            data-normal="0.00 1.00 0.00">
            <div class="unselectable" style="display: flex;transform: translateX(50%)">
                <div class="hotspot-bar"></div>
                <div class="unselectable hotspot-text text-white">Aluminium crush-proof couplings</div>
            </div>
        </div>

        <div class="unselectable" id="hotspot-Hose" slot="hotspot-Hose" data-position="-0.08 0.19 0.10"
            data-normal="0.00 1.00 0.00">
            <div class="unselectable" style="display: flex;transform: translateX(50%)">
                <div class="hotspot-bar"></div>
                <div class="unselectable hotspot-text text-white">No PVC - No phthalates - No lead</div>
            </div>
        </div>

        <div id="viewer-bottom" class="viewer-bottom">
            <div id="move_camera" onclick="rotateCamera()" class="clickable"
                style="background-image: url(img/Move.png);"></div>
            <div id="animate" onclick="modelAnimate()" class="clickable"
                style="background-image: url(img/Animate.png);"></div>
        </div>
        <script>
            const materialArray = [[]];
            let colors = []

            let bumps = []

            const positions = [

                "-30deg 55deg 80%",

                "180deg 60deg 75%",

                "20deg 60deg 90%",

            ];

            const getAnnotations = function () {
                return [
                    document.getElementById('hotspot-Couplings'), document.getElementById('hotspot-Hose')
                ].filter((elem) => elem);
            }

            const positionToAnnotation = {
                0: [], 1: ['hotspot-Couplings'], 2: ['hotspot-Hose']
            };

            const hasAnimations = true

            if (!hasAnimations)
                animate.style.display = "none"

        </script>
        <script>
            const modelViewer = document.querySelector("model-viewer");
            const colorButtons = document.getElementsByClassName("color-button");

            modelViewer.addEventListener('finished-animation', () => {
                modelViewer.pause();
            });

            modelViewer.addEventListener('change-color', (event) => {
                const colorString = event.detail;

                if (!colorString) {
                    return;
                }

                for (let mat of materialArray) {
                    console.log(mat)
                }

                for (let mat of modelViewer.model.materials) {
                    console.log(mat.name);
                    if (materialArray.includes(mat.name)) {
                        console.log("set color " + colorString)
                        mat.pbrMetallicRoughness.setBaseColorFactor(colorString);
                    }
                }
            });
        </script>
        <script src="js/ContentCustomizer.js"></script>
    </model-viewer>
    <script type="module" src="js/model-viewer/dist/new-model-viewer.js"></script>
    <!-- <script nomodule src="js/model-viewer/dist/uqido-model-viewer-legacy.js"></script> -->
</body>

</html>