diff --git a/src/Experience/Screen.js b/src/Experience/Screen.js new file mode 100644 index 0000000..4457346 --- /dev/null +++ b/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 + } +} \ No newline at end of file diff --git a/src/Experience/World.js b/src/Experience/World.js index 864419a..1c82ee0 100644 --- a/src/Experience/World.js +++ b/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() { } diff --git a/src/Experience/assets.js b/src/Experience/assets.js index 8d38e5c..3ef71d9 100644 --- a/src/Experience/assets.js +++ b/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' }, ] diff --git a/static/assets/macScreenModel.glb b/static/assets/macScreenModel.glb new file mode 100644 index 0000000..36a5ee9 Binary files /dev/null and b/static/assets/macScreenModel.glb differ diff --git a/static/assets/pcScreenModel.glb b/static/assets/pcScreenModel.glb new file mode 100644 index 0000000..0ca872b Binary files /dev/null and b/static/assets/pcScreenModel.glb differ diff --git a/static/assets/roomModel.glb b/static/assets/roomModel.glb index 1a961b4..6d78def 100644 Binary files a/static/assets/roomModel.glb and b/static/assets/roomModel.glb differ diff --git a/static/assets/videoPortfolio.mp4 b/static/assets/videoPortfolio.mp4 new file mode 100644 index 0000000..6d16c8c Binary files /dev/null and b/static/assets/videoPortfolio.mp4 differ