diff --git a/fuck.html b/fuck.html new file mode 100644 index 0000000..9a25185 --- /dev/null +++ b/fuck.html @@ -0,0 +1,26 @@ + + + + + + +
+ + + + + \ No newline at end of file diff --git a/index.html b/index.html index 8baa52e..6954b44 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,8 @@ // a state beyond death CORRUPTING = 3 - PLAYERHEIGHT = 0 + // to make cam pos agree with where your eyes are (ish) + PLAYERHEIGHT = 0.3 FLOOR = 0.9 MOVE = 0 diff --git a/lib/Album.js b/lib/Album.js new file mode 100644 index 0000000..6c9a1ab --- /dev/null +++ b/lib/Album.js @@ -0,0 +1,6 @@ +class Album extends Character { + constructor(title, urls){ + + } + +} \ No newline at end of file diff --git a/lib/Character.js b/lib/Character.js index dc2f7d7..e2d14ac 100644 --- a/lib/Character.js +++ b/lib/Character.js @@ -91,6 +91,9 @@ class Character { // ignored if none this.components = [] + + // everyones a char + // place.characters[ this.mesh.id ] = this } move(x, y, z){ diff --git a/lib/Component.js b/lib/Component.js index 21b0c68..1480003 100644 --- a/lib/Component.js +++ b/lib/Component.js @@ -17,6 +17,10 @@ class Component extends Character { // vector3 this.offset = offset } + + // customAnimation(){ + // this.mesh.rotation.y += 0.004 + // } } export { Component } \ No newline at end of file diff --git a/lib/MusicPlayer.js b/lib/MusicPlayer.js index a374767..63571c3 100644 --- a/lib/MusicPlayer.js +++ b/lib/MusicPlayer.js @@ -13,38 +13,113 @@ class MusicPlayer extends Character { mat = new THREE.MeshPhysicalMaterial( { color: "#FFFFFF" }) super(geo, bbox, [255,255,255], mat) + // isplaying + this.playing = false this.currentTrack = 0 this.urls = urls this.tracks = [] - let url - for(var i=0; i { this.playSong(this.currentTrack) } ) - this.playButton.pushable = false - this.playButton.grabbable = false + let playmat = new THREE.MeshStandardMaterial( { color: "#00ff00" }) + let offset = new THREE.Vector3(-0.05,0.01,0.1) + this.playButton = new Component( this, offset, playgeo, [0,255,0], playmat, () => { this.playSong(this.currentTrack) } ) this.playButton.clickable = true scene.add(this.playButton.mesh) - this.components.push( this.playButton ) + + let stopgeo = new THREE.BoxGeometry( 0.02, 0.02, 0.02 ) + let stopmat = new THREE.MeshStandardMaterial( { color: "#ff0000" }) + let stopoffset = new THREE.Vector3(0.02,0.01,0.1) + this.stopButton = new Component( this, stopoffset, stopgeo, [0,255,0], stopmat, () => { this.stopSong(this.currentTrack) } ) + this.stopButton.clickable = true + scene.add(this.stopButton.mesh) + this.components.push( this.stopButton ) + + + let nextgeo = new THREE.BoxGeometry( 0.02, 0.02, 0.02 ) + let nextmat = new THREE.MeshStandardMaterial( { color: "#00ffff" }) + let nextoffset = new THREE.Vector3(0.02,0.08,0.1) + this.nextButton = new Component( this, nextoffset, nextgeo, [0,255,0], nextmat, () => { this.nextTrack() } ) + this.nextButton.clickable = true + scene.add(this.nextButton.mesh) + this.components.push( this.nextButton ) + + let prevgeo = new THREE.BoxGeometry( 0.02, 0.02, 0.02 ) + let prevmat = new THREE.MeshStandardMaterial( { color: "#ffff00" }) + let prevoffset = new THREE.Vector3(-0.05,0.08,0.1) + this.prevButton = new Component( this, prevoffset, prevgeo, [0,255,0], prevmat, () => { this.prevTrack() } ) + this.prevButton.clickable = true + scene.add(this.prevButton.mesh) + this.components.push( this.prevButton ) + + // display + this.createDisplay() + } + + createDisplay(){ + // create a canvas element + let mat = this.createDisplayMat("FOG STEREO") + let dispOffset = new THREE.Vector3(0,0.25,0) + this.display = new Component(this, dispOffset, new THREE.PlaneGeometry(0.36, 0.06), [0,120,200], mat) + scene.add( this.display.mesh ) + + // place.characters[this.display.mesh.id] = this.display + this.components.push( this.display ) + } + + setDisplay(text){ + let newMat = this.createDisplayMat(text) + this.display.mesh.material = newMat + } + + createDisplayMat(text){ + let canvas1 = document.createElement('canvas') + canvas1.width = 360 + canvas1.height = 60 + let context1 = canvas1.getContext('2d') + context1.font = "Bold 50px Arial" + context1.fillStyle = "rgba(255,255,255,0.95)" + context1.textBaseLine = "middle" + console.log( 'text', text ) + context1.fillText( text, 0, 50) + + // canvas contents will be used for a texture + let texture1 = new THREE.CanvasTexture(canvas1) + texture1.needsUpdate = true + // texture1.wrapS = THREE.RepeatWrapping + // texture1.wrapT = THREE.RepeatWrapping + // texture1.repeat.set(2,2) + + let material1 = new THREE.MeshBasicMaterial( { map: texture1, side: THREE.DoubleSide } ) + material1.transparent = true + + + + return material1 + } + + loadAlbum(urls){ + let url + for(var i=0; i { t.stop() } ) } this.currentTrack = songIndex + console.log( 'playing ', this.currentTrack ) if( this.tracks[this.currentTrack].loaded ){ this.tracks[this.currentTrack].play() @@ -53,6 +128,9 @@ class MusicPlayer extends Character { this.tracks[this.currentTrack].load() } + // flag this now, but might have to load first + this.playing = true + // now load the next one let nextTrack = this.currentTrack+1 if(this.tracks[nextTrack] && !this.tracks[nextTrack].loaded){ @@ -60,17 +138,30 @@ class MusicPlayer extends Character { } } + stopSong(){ + console.log( 'stop song', this.currentTrack ) + // if(this.playing){ + // this.tracks[this.currentTrack].stop() + // this.playing = false + // } + this.tracks.forEach( (t) => { t.stop() } ) + this.playing = false + } + nextTrack(){ + console.log( 'next track', this.currentTrack ) this.incTrack(1) } prevTrack(){ + console.log( 'prev track', this.currentTrack ) this.incTrack(-1) } incTrack(inc){ // inc looping around this.currentTrack = util.incInRange(this.currentTrack, inc, 0, this.tracks.length-1) + console.log( 'current track now inc to ', this.currentTrack ) this.playSong(this.currentTrack) } } diff --git a/lib/Pointer.js b/lib/Pointer.js index 482e2cd..ffaa911 100644 --- a/lib/Pointer.js +++ b/lib/Pointer.js @@ -16,7 +16,7 @@ class Pointer extends Character { // mesh id aka characters[mesh id] this.grabbedId = null - let geo = new THREE.BoxGeometry( 0.1,0.1,0.1 ) + let geo = new THREE.BoxGeometry( 0.05,0.05,0.05 ) let mat = new THREE.MeshPhysicalMaterial( { color: '#0000ff', transparent: true, transmission: 0.5, reflectivity: 1, roughness: 0, clearcoat: 1.0, clearcoatRoughness: 0.1 }) let offset = new THREE.Vector3(0,0,0) @@ -24,8 +24,13 @@ class Pointer extends Character { this.components.push(this.grabBox) camGroup.add(this.grabBox.mesh) + // throwing this.lastPos = new THREE.Vector3(0, 0, 0) this.accVector = new THREE.Vector3(0,0,0) + + this.componentIds = {} + this.componentIds[this.mesh.id] = true + this.componentIds[this.grabBox.mesh.id] = true } samplePosition(){ diff --git a/lib/RelaxingRain.js b/lib/RelaxingRain.js index 3ec0659..4db4e0f 100644 --- a/lib/RelaxingRain.js +++ b/lib/RelaxingRain.js @@ -41,6 +41,22 @@ class RelaxingRain extends Place { scene.add(spotlight) + // var spotlight2 = new THREE.SpotLight("#dddddd", 0.03) + // spotlight2.castShadow = true + // spotlight2.shadow.mapSize.width = 1024*4 + // spotlight2.shadow.mapSize.height = 1024*4 + // spotlight2.position.set(-1,1.8,0) + // spotlight2.lookAt(1,-1,-2) + + // // light.shadow.mapSize.width = 512; // default + // // light.shadow.mapSize.height = 512; // default + // spotlight2.shadow.camera.near = 0.5; // default + // spotlight2.shadow.camera.far = 500; // default + // spotlight2.shadow.focus = 1; // default + + // scene.add(spotlight2) + + // var mountainLight = new THREE.SpotLight("#bbbb00", 0.004) // mountainLight.castShadow = true // mountainLight.shadow.mapSize.width = 1024*4 @@ -444,6 +460,9 @@ class RelaxingRain extends Place { this.musicPlayer.move(-0.4,1.3,-0.9499999999999999) this.characters[this.musicPlayer.mesh.id] = this.musicPlayer this.characters[this.musicPlayer.playButton.mesh.id] = this.musicPlayer.playButton + this.characters[this.musicPlayer.stopButton.mesh.id] = this.musicPlayer.stopButton + this.characters[this.musicPlayer.nextButton.mesh.id] = this.musicPlayer.nextButton + this.characters[this.musicPlayer.prevButton.mesh.id] = this.musicPlayer.prevButton scene.add( this.musicPlayer.mesh ) } diff --git a/lib/Sound.js b/lib/Sound.js index 8f03c8d..a064484 100644 --- a/lib/Sound.js +++ b/lib/Sound.js @@ -95,7 +95,11 @@ class Sound extends Character { } stop(){ - this.soundFile.stop() + // dont stop nothin + if(this.loaded && this.playing()){ + console.log( 'I am stoppin ', this ) + this.soundFile.stop() + } } handle(){ diff --git a/lib/main.js b/lib/main.js index 084ed09..b92efd2 100644 --- a/lib/main.js +++ b/lib/main.js @@ -26,7 +26,7 @@ container = document.createElement( 'div' ) document.body.appendChild( container ) - var scene + var camx,camy,camz var place var pointer @@ -56,7 +56,7 @@ // geometry.setDrawRange(0,3) var drawCount = 0 material = new THREE.LineBasicMaterial( { color: 0xff0022, linewidth: 4 } ) - line = new THREE.Line( bg, material ) + // line = new THREE.Line( bg, material ) init(); animate(); @@ -88,6 +88,9 @@ camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 500 ) camera.position.set(0,1.3,1) + camx = camera.position.x + camy = camera.position.y + camz = camera.position.z camera.add( listener ) @@ -130,7 +133,7 @@ // scene.add( directionalLight.target ) - scene.add( line ) + // scene.add( line ) controller = renderer.xr.getController( 0 ) console.log( 'controller', controller ) @@ -149,7 +152,7 @@ camGroup.add( controller ) // set player group stuff to real position - camGroup.position.set(-0.3,PLAYERHEIGHT,-0.4) + camGroup.position.set(-0.4,0,-0.4) window.addEventListener( 'resize', onWindowResize, false ) @@ -173,22 +176,70 @@ renderer.setSize( window.innerWidth, window.innerHeight ) } - function handleController( controller ) { - // console.log( 'just set grabbox bbx', pointer.grabBox.bbox.min, pointer.grabBox.bbox.max ) - var userData = controller.userData; // set cursor pos from controller pos cursor.set( 0, 0, - 0.2 ).applyMatrix4( controller.matrixWorld ) - // console.log( 'cursor', cursor ) - // laser.matrix.fromArray( controller.matrixWorld.elements ); - // laser.updateMatrixWorld(true); // set pointer ray trajectory + let cPos = new THREE.Vector3() + cPos = camera.getWorldPosition(cPos) + // camx = cPos.x + // camy = cPos.y + // camz = cPos.z + + // let dir = new THREE.Vector3( controller.position.x-camx, controller.position.y-camy, controller.position.z-camz ).normalize() + + let pos = new THREE.Vector3() + pos = controller.getWorldPosition(pos) + + let dir = new THREE.Vector3() + dir = controller.getWorldDirection(dir) + // dir = new THREE.Vector3( pos.x-cPos.x, pos.y-cPos.y, pos.z-cPos.z ).normalize() + + // RAY mmust be set using world position, everything else seems to be regular position ok + pointer.raycaster.set( pos, dir ) + + // ATTEMPT at locking pointer to nearest inter section... only works when really close so maybe a origin/direction issue + // let charObjs = [] + // util.k(place.characters).forEach( (c) => { + // if(place.characters[c].mesh) { + // charObjs.push(place.characters[c].mesh) + // } + // }) + // var intersects = pointer.raycaster.intersectObjects( charObjs ) + + // // fake init distance to simply this loop + // let closestIntersect = { distance: 10 } + // for(var i=0; i intersects[i].distance){ + // closestIntersect = intersects[i] + // } + // } + + // if(closestIntersect.distance < 10){ + // // we intersect with sommething thats relatively close, lock the pointer to the intersection + // let x,y,z + + // x = closestIntersect.point.x - pointer.mesh.position.x + // y = closestIntersect.point.y - pointer.mesh.position.y + // z = closestIntersect.point.z - pointer.mesh.position.z + + // let newOffset = new THREE.Vector3( x,y,z ) + // pointer.grabBox.offset = newOffset + // // pointer.move(closestIntersect.point.x,closestIntersect.point.y,closestIntersect.point.z) + // } else { + // let newOffset = new THREE.Vector3( 0,0,0 ) + // pointer.grabBox.offset = newOffset + // } + + // just put da pointa where the controller is pointer.move(controller.position.x, controller.position.y, controller.position.z) - // pointer.grabBox.mesh.position.set(controller.position.x, controller.position.y, controller.position.z) + if(pointer.grabbedId) { // if its grabbed, carry it with the pointer @@ -199,43 +250,21 @@ pointer.grabBox.bbox.setFromObject(pointer.grabBox.mesh) } - positions = line.geometry.attributes.position.array - - // camera to cursor - // positions[0] = camGroup.position.x - // positions[1] = camGroup.position.y + PLAYERHEIGHT - // positions[2] = camGroup.position.z - // positions[3] = cursor.x - // positions[4] = cursor.y - // positions[5] = cursor.z - - // cursor to projected point out there - // positions[0] = cursor.x - // positions[1] = cursor.y - // positions[2] = cursor.z - // positions[3] = cursor.x * 2 - camGroup.position.x - // positions[4] = cursor.y * 2 - camGroup.position.y + PLAYERHEIGHT - // positions[5] = cursor.z * 2 - camGroup.position.z - - // camera to proj point out there - // positions[0] = camGroup.position.x - // positions[1] = camGroup.position.y + PLAYERHEIGHT - // positions[2] = camGroup.position.z - // positions[3] = cursor.x * 8 - camGroup.position.x - // positions[4] = cursor.y * 8 - camGroup.position.y + PLAYERHEIGHT - // positions[5] = cursor.z * 8 - camGroup.position.z - - // controller to proj point out there - positions[0] = controller.position.x - positions[1] = controller.position.y - positions[2] = controller.position.z - positions[3] = controller.position.x * 2 - camera.position.x - positions[4] = controller.position.y * 2 - camera.position.y - positions[5] = controller.position.z * 2 - camera.position.z - - // the actual targetray from xr pose - line.matrix.fromArray( controller.matrix.toArray() ) - line.updateMatrixWorld(true) + // positions = line.geometry.attributes.position.array + + // // controller to proj point out there + // positions[0] = controller.position.x + // positions[1] = controller.position.y + // positions[2] = controller.position.z + // positions[3] = controller.position.x * 2 - camera.position.x + // positions[4] = controller.position.y * 2 - camera.position.y + // positions[5] = controller.position.z * 2 - camera.position.z + + // // the actual targetray from xr pose + // line.matrix.fromArray( controller.matrix.toArray() ) + // line.updateMatrixWorld(true) + + // char grabbing and collision @@ -282,11 +311,6 @@ if ( userData.isSelecting === true ) { // trigger is currently pulled - let camx,camy,camz - camx = camera.position.x - camy = camera.position.y+PLAYERHEIGHT - camz = camera.position.z - // add markerjunk at projected point if( true && markerJunkTimer.time() > 420){ markerJunkTimer.reset() @@ -297,57 +321,53 @@ place.junk.push(markerJunk) } - let dir = new THREE.Vector3( controller.position.x-camx, controller.position.y-camy, controller.position.z-camz ).normalize() - - // pointer.raycaster.set(origin, dir) - // pointer.raycaster.set( controller.getWorldPosition(), controller.getWorldDirection() ) - pointer.raycaster.set( controller.getWorldPosition(), dir ) - line.material.color.setRGB(12,34,128) + // doing this all the time now + // let dir = new THREE.Vector3( controller.position.x-camx, controller.position.y-camy, controller.position.z-camz ).normalize() + // pointer.raycaster.set( controller.getWorldPosition(), dir ) - let pushThese = [] + // line.material.color.setRGB(12,34,128) // if interseects, make it red - var intersects = pointer.raycaster.intersectObjects( scene.children ) let thisgeo + + // if we're clicking, use the same intersects from above for ( var i = 0; i < intersects.length; i++ ) { - if(intersects[i].object.id != line.id){ - - // intersection markers - // if( true && markerJunkTimer.time() > 120){ - // markerJunkTimer.reset() - // thisgeo = new THREE.BoxGeometry( 0.02, 0.02, 0.02 ) - // let markerJunk = new JunkPiece(thisgeo, new THREE.Box3( new THREE.Vector3(), new THREE.Vector3() ), [0,255,0], new THREE.MeshStandardMaterial( {color: "#0000ff" } ) ) - // markerJunk.setPosition(intersects[i].point.x,intersects[i].point.y,intersects[i].point.z) - // scene.add(markerJunk.mesh) - // markerJunk.pushable = true - // place.junk.push(markerJunk) - // } - - // pushem - if(pointer.grabbedId){ - // if already grabbing something, push crap out of the way when were near - - char = place.characters[intersects[i].object.id] - if(char && char.pushable){ - char.mesh.material.color.setRGB(255,0,0) - // do some shit - - - char.accx += (char.mesh.position.x - intersects[i].point.x)*3 - char.accy += (char.mesh.position.y - intersects[i].point.y)*3 - char.accz += (char.mesh.position.z - intersects[i].point.z)*3 - - console.log( 'now I push your shit', char.mesh.id, char.accx ) - } + + // intersection markers + // if( true && markerJunkTimer.time() > 120){ + // markerJunkTimer.reset() + // thisgeo = new THREE.BoxGeometry( 0.02, 0.02, 0.02 ) + // let markerJunk = new JunkPiece(thisgeo, new THREE.Box3( new THREE.Vector3(), new THREE.Vector3() ), [0,255,0], new THREE.MeshStandardMaterial( {color: "#0000ff" } ) ) + // markerJunk.setPosition(intersects[i].point.x,intersects[i].point.y,intersects[i].point.z) + // scene.add(markerJunk.mesh) + // markerJunk.pushable = true + // place.junk.push(markerJunk) + // } + + // pushem + if(pointer.grabbedId){ + // if already grabbing something, push crap out of the way when were near + + char = place.characters[intersects[i].object.id] + if(char && char.pushable){ + char.mesh.material.color.setRGB(255,0,0) + // do some shit + + + char.accx += (char.mesh.position.x - intersects[i].point.x)*3 + char.accy += (char.mesh.position.y - intersects[i].point.y)*3 + char.accz += (char.mesh.position.z - intersects[i].point.z)*3 + + console.log( 'now I push your shit', char.mesh.id, char.accx ) } } } } else { // game.destination = [0, 1.8, -1] - line.material.color.setRGB(255,34,24) + // line.material.color.setRGB(255,34,24) // stopped trigger hold, stop grabbing let grabbedId = pointer.grabbedId @@ -377,7 +397,7 @@ if(drawCount == 2){ // need to do this ONCE after each position change to work - line.geometry.attributes.position.needsUpdate = true + // line.geometry.attributes.position.needsUpdate = true drawCount = 0 }