✨ Add loupedeck

package.json

@@ -14,6 +14,7 @@
     "css-loader": "^5.2.6",
     "file-loader": "^6.2.0",
     "glslify-loader": "^2.0.0",
+    "gsap": "^3.7.1",
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "^5.3.2",
     "mini-css-extract-plugin": "^2.1.0",

src/Experience/LoupedeckButtons.js

@@ -0,0 +1,170 @@
+import * as THREE from 'three'
+import { gsap } from 'gsap'
+
+import Experience from './Experience.js'
+
+export default class LoupedeckButtons
+{
+    constructor()
+    {
+        this.experience = new Experience()
+        this.resources = this.experience.resources
+        this.debug = this.experience.debug
+        this.scene = this.experience.scene
+        this.time = this.experience.time
+
+        // Debug
+        if(this.debug)
+        {
+            this.debugFolder = this.debug.addFolder({
+                title: 'loupedeckButtons',
+                expanded: true
+            })
+        }
+
+        this.setModel()
+        this.setAnimation()
+    }
+
+    setModel()
+    {
+        this.model = {}
+
+        this.model.items = []
+
+        // Children
+        const children = [...this.resources.items.loupedeckButtonsModel.scene.children]
+        children.sort((_a, _b) =>
+        {
+            if(_a.name < _b.name)
+                return -1
+
+            if(_a.name > _b.name)
+                return 1
+
+            return 0
+        })
+
+        let i = 0
+        for(const _child of children)
+        {
+            const item = {}
+
+            item.index = i
+
+            item.material = new THREE.MeshBasicMaterial({
+                color: 0xffffff,
+                transparent: true
+            })
+
+            item.mesh = _child
+            item.mesh.material = item.material
+            this.scene.add(item.mesh)
+
+            this.model.items.push(item)
+
+            // // Debug
+            // if(this.debug)
+            // {
+            //     this.debugFolder
+            //         .addInput(
+            //             item,
+            //             'color',
+            //             { view: 'color' }
+            //         )
+            //         .on('change', () =>
+            //         {
+            //             item.material.color.set(item.color)
+            //         })
+            // }
+
+            i++
+        }
+    }
+
+    setAnimation()
+    {
+        this.animation = {}
+
+        this.animation.colors = ['#af55cf', '#dbd85d', '#e86b24', '#b81b54']
+
+        for(const _colorIndex in this.animation.colors)
+        {
+            // Debug
+            if(this.debug)
+            {
+                this.debugFolder
+                    .addInput(
+                        this.animation.colors,
+                        _colorIndex,
+                        { view: 'color' }
+                    )
+                    // .on('change', () =>
+                    // {
+                    //     item.material.color.set(item.color)
+                    // })
+            }
+        }
+
+        this.animation.play = () =>
+        {
+            const buttons = []
+            const outButtons = []
+
+            for(const _button of this.model.items)
+            {
+                if(Math.random() < 0.5)
+                {
+                    buttons.push(_button)
+                }
+                else
+                {
+                    outButtons.push(_button)
+                }
+            }
+
+            for(const _button of outButtons)
+            {
+                _button.material.opacity = 0
+            }
+
+            let i = 0
+            for(const _button of buttons)
+            {
+                _button.material.color.set(this.animation.colors[Math.floor(Math.random() * this.animation.colors.length)])
+                gsap.to(
+                    _button.material,
+                    {
+                        delay: i * 0.05,
+                        duration: 0.2,
+                        opacity: 1,
+                        onComplete: () =>
+                        {
+                            gsap.to(
+                                _button.material,
+                                {
+                                    delay: 3,
+                                    duration: 0.5,
+                                    opacity: 0
+                                }
+                            )
+                        }
+                    }
+                )
+
+                i++
+            }
+        }
+
+        this.animation.play()
+        window.setInterval(this.animation.play, 5000)
+    }
+
+    update()
+    {
+        // for(const _item of this.model.items)
+        // {
+        //     _item.material.opacity = Math.sin(this.time.elapsed * 0.002 - _item.index * 0.5) * 0.5 + 0.5
+        // }
+    }
+}

src/Experience/Navigation.js

@@ -21,9 +21,7 @@ export default class Navigation
 
         this.view.spherical = {}
         this.view.spherical.value = new THREE.Spherical(30, Math.PI * 0.35, - Math.PI * 0.25)
-
-        this.view.spherical.value.radius = 5
-
+        // this.view.spherical.value.radius = 5
         this.view.spherical.smoothed = this.view.spherical.value.clone()
         this.view.spherical.smoothing = 0.005
         this.view.spherical.limits = {}
@@ -33,9 +31,7 @@ export default class Navigation
 
         this.view.target = {}
         this.view.target.value = new THREE.Vector3(0, 2, 0)
-
-        this.view.target.value.set(-3, 3, -3)
-
+        // this.view.target.value.set(0, 3, -3)
         this.view.target.smoothed = this.view.target.value.clone()
         this.view.target.smoothing = 0.005
         this.view.target.limits = {}

src/Experience/World.js

@@ -1,6 +1,7 @@
 import * as THREE from 'three'
 import Experience from './Experience.js'
 import GoogleLeds from './GoogleLeds.js'
+import LoupedeckButtons from './LoupedeckButtons.js'
 import CoffeeSteam from './CoffeeSteam.js'
 
 export default class World
@@ -19,6 +20,7 @@ export default class World
                 // this.setDummy()
                 this.setRoom()
                 this.setGoogleLeds()
+                this.setLoupedeckButtons()
                 this.setCoffeeSteam()
             }
         })
@@ -65,6 +67,11 @@ export default class World
         this.googleLeds = new GoogleLeds()
     }
 
+    setLoupedeckButtons()
+    {
+        this.loupedeckButtons = new LoupedeckButtons()
+    }
+
     setCoffeeSteam()
     {
         this.coffeeSteam = new CoffeeSteam()
@@ -79,6 +86,9 @@ export default class World
         if(this.googleLeds)
             this.googleLeds.update()
 
+        if(this.loupedeckButtons)
+            this.loupedeckButtons.update()
+
         if(this.coffeeSteam)
             this.coffeeSteam.update()
     }

src/Experience/assets.js

@@ -7,6 +7,8 @@ export default [
             { name: 'googleHomeLedMaskTexture', source: '/assets/googleHomeLedMask.png', type: 'texture' },
             { name: 'googleHomeLedsModel', source: '/assets/googleHomeLedsModel.glb', type: 'model' },
 
+            { name: 'loupedeckButtonsModel', source: '/assets/loupedeckButtonsModel.glb', type: 'model' },
+
             { name: 'coffeeSteamModel', source: '/assets/coffeeSteamModel.glb', type: 'model' },
 
             { name: 'bakedTexture', source: '/assets/baked.jpg', type: 'texture' },