VueThreeJs/index.html at master · classicmatsuo/VueThreeJs · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id='app'>
    <form>
      <div class="input-container"
            v-for="item in streamerSection">
        <div class="buttonAdd">
          <input
                  type="checkbox"
                  v-model="selectedStreamerSections"
                  :id="item.section"
                  :value="item.section"/>
          <label :for="item.section">{{item.toggle}}: {{item.section}}</label>
        </div>

        <div class="buttonColumn">
          <div class="buttonIcon">
            <select v-model="item.sectionColor">
                <option disabled value="null">Select Color</option>
              <option  v-for="color in colors"  :id="item.sectionColor" :value="color.hsl">
                {{ color.name }}
              </option>
            </select>
          </div>
          <input v-model="item.sectionSize" type="range" :id="item.sectionSize" name="size" min="0.5" max="2.5" step="0.25">
          <label for="volume">Size</label>
        </div>
      </div>
    </form>
    <canvas id="streamerJS"></canvas>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
  <script src="./fuzzymesh.js"></script>
  <script src="https://unpkg.com/three-bas@2.0.2/dist/bas.min.js"></script>
  <script src="main.js"></script>


</body>
</html>