✨ Add google home leds

package.json

@@ -23,6 +23,7 @@
     "stats.js": "^0.17.0",
     "style-loader": "^3.0.0",
     "three": "^0.130.1",
+    "tweakpane": "^3.0.5",
     "webpack": "^5.42.1",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2",

src/Experience/Experience.js

@@ -1,4 +1,6 @@
 import * as THREE from 'three'
+import { Pane } from 'tweakpane'
+
 import Time from './Utils/Time.js'
 import Sizes from './Utils/Sizes.js'
 import Stats from './Utils/Stats.js'
@@ -36,6 +38,7 @@ export default class Experience
         this.sizes = new Sizes()
         this.setConfig()
         this.setStats()
+        this.setDebug()
         this.setScene()
         this.setCamera()
         this.setRenderer()
@@ -90,6 +93,15 @@ export default class Experience
             this.stats = new Stats(true)
         }
     }
+
+    setDebug()
+    {
+        if(this.config.debug)
+        {
+            this.debug = new Pane()
+            this.debug.containerElem_.style.width = '320px'
+        }
+    }
 
     setScene()
     {

src/Experience/GoogleLeds.js

@@ -0,0 +1,100 @@
+import Experience from './Experience.js'
+
+import * as THREE from 'three'
+
+export default class GoogleLeds
+{
+    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: 'googleLeds',
+                expanded: true
+            })
+        }
+
+        this.setModel()
+    }
+
+    setModel()
+    {
+        this.model = {}
+
+        this.model.items = []
+
+        const colors = ['#196aff', '#ff0000', '#ff5d00', '#7db81b']
+
+        // Texture
+        this.model.texture = this.resources.items.googleHomeLedMaskTexture
+
+        // Children
+        const children = [...this.resources.items.googleHomeLedsModel.scene.children]
+        children.sort((_a, _b) =>
+        {
+            if(_a.name < _b.name)
+                return -1
+
+            if(_a.name > _b.name)
+                return 1
+
+            return 0
+        })
+
+        console.log(children)
+
+        let i = 0
+        for(const _child of children)
+        {
+            const item = {}
+
+            item.index = i
+
+            item.color = colors[item.index]
+
+            item.material = new THREE.MeshBasicMaterial({
+                color: item.color,
+                transparent: true,
+                alphaMap: this.model.texture
+            })
+
+            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++
+        }
+    }
+
+    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

@@ -33,7 +33,7 @@ export default class Navigation
         this.view.target.smoothing = 0.005
         this.view.target.limits = {}
         this.view.target.limits.x = { min: - 4, max: 4 }
-        this.view.target.limits.y = { min: 1, max: 4 }
+        this.view.target.limits.y = { min: 1, max: 6 }
         this.view.target.limits.z = { min: - 4, max: 4 }
 
         this.view.drag = {}
@@ -85,7 +85,7 @@ export default class Navigation
         {
             _event.preventDefault()
 
-            this.view.drag.alternative = _event.button === 2 || _event.ctrlKey || _event.shiftKey
+            this.view.drag.alternative = _event.button === 2 || _event.button === 1 || _event.ctrlKey || _event.shiftKey
 
             this.view.down(_event.clientX, _event.clientY)
 

src/Experience/World.js

@@ -1,5 +1,6 @@
 import * as THREE from 'three'
 import Experience from './Experience.js'
+import GoogleLeds from './GoogleLeds.js'
 
 export default class World
 {
@@ -16,6 +17,7 @@ export default class World
             {
                 // this.setDummy()
                 this.setRoom()
+                this.setGoogleLeds()
             }
         })
     }
@@ -56,12 +58,19 @@ export default class World
         this.scene.add(directionalLight)
     }
 
+    setGoogleLeds()
+    {
+        this.googleLeds = new GoogleLeds()
+    }
+
     resize()
     {
     }
 
     update()
     {
+        if(this.googleLeds)
+            this.googleLeds.update()
     }
 
     destroy()

src/Experience/assets.js

@@ -4,6 +4,8 @@ export default [
         data: {},
         items:
         [
+            { name: 'googleHomeLedMaskTexture', source: '/assets/googleHomeLedMask.png', type: 'texture' },
+            { name: 'googleHomeLedsModel', source: '/assets/googleHomeLeds.glb', type: 'model' },
             { name: 'bakedTexture', source: '/assets/baked.jpg', type: 'texture' },
             { name: 'roomModel', source: '/assets/roomModel.glb' },
         ]