✨ Add screens

src/Experience/Screen.js

@@ -0,0 +1,54 @@
+import * as THREE from 'three'
+
+import Experience from './Experience.js'
+
+export default class Screen
+{
+    constructor(_mesh, _sourcePath)
+    {
+        this.experience = new Experience()
+        this.resources = this.experience.resources
+        this.debug = this.experience.debug
+        this.scene = this.experience.scene
+        this.world = this.experience.world
+
+        this.mesh = _mesh
+        this.sourcePath = _sourcePath
+
+        this.setModel()
+    }
+
+    setModel()
+    {
+        this.model = {}
+
+        // Element
+        this.model.element = document.createElement('video')
+        this.model.element.muted = true
+        this.model.element.loop = true
+        this.model.element.controls = true
+        this.model.element.playsInline = true
+        this.model.element.autoplay = true
+        this.model.element.src = this.sourcePath
+        this.model.element.play()
+
+        // Texture
+        this.model.texture = new THREE.VideoTexture(this.model.element)
+        this.model.texture.encoding = THREE.sRGBEncoding
+
+        // Material
+        this.model.material = new THREE.MeshBasicMaterial({
+            map: this.model.texture
+        })
+
+        // Mesh
+        this.model.mesh = this.mesh
+        this.model.mesh.material = this.model.material
+        this.scene.add(this.model.mesh)
+    }
+
+    update()
+    {
+        // this.model.group.rotation.y = Math.sin(this.time.elapsed * 0.0005) * 0.5
+    }
+}

src/Experience/World.js

@@ -6,6 +6,7 @@ import CoffeeSteam from './CoffeeSteam.js'
 import TopChair from './TopChair.js'
 import ElgatoLight from './ElgatoLight.js'
 import BouncingLogo from './BouncingLogo.js'
+import Screen from './Screen.js'
 
 export default class World
 {
@@ -28,6 +29,7 @@ export default class World
                 this.setTopChair()
                 this.setElgatoLight()
                 this.setBouncingLogo()
+                this.setScreens()
             }
         })
     }
@@ -94,6 +96,18 @@ export default class World
         this.bouncingLogo = new BouncingLogo()
     }
 
+    setScreens()
+    {
+        this.pcScreen = new Screen(
+            this.resources.items.pcScreenModel.scene.children[0],
+            '/assets/videoPortfolio.mp4'
+        )
+        this.macScreen = new Screen(
+            this.resources.items.macScreenModel.scene.children[0],
+            '/assets/videoPortfolio.mp4'
+        )
+    }
+
     resize()
     {
     }

src/Experience/assets.js

@@ -17,6 +17,10 @@ export default [
 
             { name: 'threejsJourneyLogoTexture', source: '/assets/threejsJourneyLogo.png', type: 'texture' },
 
+            { name: 'pcScreenModel', source: '/assets/pcScreenModel.glb', type: 'model' },
+
+            { name: 'macScreenModel', source: '/assets/macScreenModel.glb', type: 'model' },
+
             { name: 'bakedTexture', source: '/assets/baked.jpg', type: 'texture' },
             { name: 'roomModel', source: '/assets/roomModel.glb' },
         ]