foyer2/index.js at master · elektronstudio/foyer2 · 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
import { createApp } from "./src/deps/vue.js";
import ThreeScene from "./src/components/ThreeScene.js";
import ThreeGroup from "./src/components/ThreeGroup.js";
import ThreeGeometry from "./src/components/ThreeGeometry.js";
import ThreeVideoHsl from "./src/components/ThreeVideoHsl.js";
import ThreeText from "./src/components/ThreeText.js";
import ThreePanels from "./src/components/ThreePanels.js";
import ThreeLine from "./src/components/ThreeLine.js";
import ThreeBackground from "./src/components/ThreeBackground.js";
import ThreeLights from "./src/components/ThreeLights.js";
import ThreeUsers from "./src/components/ThreeUsers.js";
import Settings from "./src/components/Settings.js";
import Debug from "./src/components/Debug.js";

import { rectPoints, settings } from "./src/lib/index.js";

const App = {
  components: {
    Debug,
    Settings,
    ThreeBackground,
    ThreeGeometry,
    ThreeGroup,
    ThreeLights,
    ThreeLine,
    ThreePanels,
    ThreeScene,
    ThreeText,
    ThreeUsers,
    ThreeVideoHsl,
  },
  setup() {
    return { settings, rectPoints };
  },
  template: `
  <three-scene>
    <three-lights :color="settings.lightColor" />
    <three-background :color="settings.materialColor" />
    <three-geometry
      :rotation="[-90,0,0]"
      geometry="PlaneGeometry"
      width="50"
      height="50"
      :color="settings.materialColor"
      :lineColor="settings.lineColor"
      :receiveShadow="true"
    />
    <three-group :position="[0,settings.panelOffset,0]">
      <three-panels v-slot="{ panel }">
        <three-geometry
          geometry="PlaneGeometry"
          :width="panel.width"
          depth="0.05"
          :color="settings.materialColor"
          :lineColor="settings.lineColor"
          :receiveShadow="true"
        />
        <three-line
          :points="rectPoints(panel.width, 1)"
          :lineColor="settings.lineColor"
        />
      </three-panels>
      <three-text
        :position="[-1, 1.5, -1]"
        text="elektron"
        anchorX="center"
        anchorY="middle"
        fontSize="1.25"
        letterSpacing="-0.01"
        :color="settings.lineColor"
      />
    </three-group>
    <three-users />
    <debug />
    <settings />
  </three-scene>
`,
};

const app = createApp(App);
app.mount("#app");