diff --git a/package-lock.json b/package-lock.json index 8a90fea..7ee3e71 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5839,6 +5839,11 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" }, + "tweakpane": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/tweakpane/-/tweakpane-3.0.5.tgz", + "integrity": "sha512-HivFjOs510RbZSNgxv4x5LVFsHFN1ryfgpOp3n6wrgg1jLxbdlA/UTIbTLi/DYH7g76rGQqW/+IRmHPfjIujpQ==" + }, "type-is": { "version": "1.6.18", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", diff --git a/package.json b/package.json index e4e5856..363e4e1 100644 --- a/package.json +++ b/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", diff --git a/src/Experience/Experience.js b/src/Experience/Experience.js index 1b18833..55ffed5 100644 --- a/src/Experience/Experience.js +++ b/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() { diff --git a/src/Experience/GoogleLeds.js b/src/Experience/GoogleLeds.js new file mode 100644 index 0000000..463383e --- /dev/null +++ b/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 + } + } +} \ No newline at end of file diff --git a/src/Experience/Navigation.js b/src/Experience/Navigation.js index 2bcff2e..e45d949 100644 --- a/src/Experience/Navigation.js +++ b/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) diff --git a/src/Experience/World.js b/src/Experience/World.js index f07f790..f9469ff 100644 --- a/src/Experience/World.js +++ b/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() diff --git a/src/Experience/assets.js b/src/Experience/assets.js index 8792c55..4e03601 100644 --- a/src/Experience/assets.js +++ b/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' }, ] diff --git a/static/assets/googleHomeLedMask.png b/static/assets/googleHomeLedMask.png new file mode 100644 index 0000000..38ef0eb Binary files /dev/null and b/static/assets/googleHomeLedMask.png differ diff --git a/static/assets/googleHomeLeds.glb b/static/assets/googleHomeLeds.glb new file mode 100644 index 0000000..f7453c2 Binary files /dev/null and b/static/assets/googleHomeLeds.glb differ