From b3e9736db163dab01561eae3b5ec9bb6e71dbfa1 Mon Sep 17 00:00:00 2001 From: Leon van Kammen Date: Thu, 4 May 2023 21:28:12 +0200 Subject: [PATCH] added pos frag starting point --- dist/xrfragment.three.js | 18 ++++++++++++++---- example/assets/style.css | 10 +++++++++- example/threejs/sandbox/index.html | 25 ++++++++++++++++--------- src/three/index.js | 9 ++++++--- src/three/xrf/env.js | 3 ++- src/three/xrf/pos.js | 6 ++++++ 6 files changed, 53 insertions(+), 18 deletions(-) create mode 100644 src/three/xrf/pos.js diff --git a/dist/xrfragment.three.js b/dist/xrfragment.three.js index 744f5ba..cd6a83f 100644 --- a/dist/xrfragment.three.js +++ b/dist/xrfragment.three.js @@ -597,9 +597,11 @@ xrfragment.three = {} xrfragment.init = function(opts){ opts = opts || {} - for ( let i in opts ) xrfragment[i] = opts[i] + for ( let i in opts ) xrfragment[i] = opts[i] + for ( let i in xrfragment.XRF ) xrfragment[i] = xrfragment.XRF[i] // shortcuts to constants (BROWSER_OVERRIDE e.g.) xrfragment.Parser.debug = xrfragment.debug if( opts.loaders ) opts.loaders.map( xrfragment.patchLoader ) + return xrfragment } xrfragment.patchLoader = function(loader){ @@ -620,13 +622,15 @@ xrfragment.parseModel = function(model){ xrfragment.Parser.parse( k, mesh.userData[k], frag ) // call native function (xrf/env.js e.g.), or pass it to user decorator let func = xrfragment.three[k] || function(){} - if( xrfragment[k] ) xrfragment[k]( func, frag[k], mesh, model, xrfragment.scene, xrfragment.renderer, xrfragment.THREE ) - else func( frag[k], mesh, model, xrfragment.scene, xrfragment.renderer, xrfragment.THREE ) + let opts = {mesh, model, camera:xrfragment.camera, scene: xrfragment.scene, renderer: xrfragment.renderer, THREE: xrfragment.THREE } + if( xrfragment[k] ) xrfragment[k]( func, frag[k], opts) + else func( frag[k], opts) } } }) } -xrfragment.three.env = function(v, mesh, model, scene, renderer, THREE){ +xrfragment.three.env = function(v, opts){ + let { mesh, model, camera, scene, renderer, THREE} = opts let env = mesh.getObjectByName(v.string) env.material.map.mapping = THREE.EquirectangularReflectionMapping; scene.environment = env.material.map @@ -634,4 +638,10 @@ xrfragment.three.env = function(v, mesh, model, scene, renderer, THREE){ renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1; } +xrfragment.three.pos = function(v, opts){ + let { mesh, model, camera, scene, renderer, THREE} = opts + camera.position.x = v.x + camera.position.y = v.y + camera.position.z = v.z +} export default xrfragment; diff --git a/example/assets/style.css b/example/assets/style.css index 841881c..b866b90 100644 --- a/example/assets/style.css +++ b/example/assets/style.css @@ -92,5 +92,13 @@ a#source{ .lil-gui.autoPlace{ right:0px !important; - top:49px !important; + top:auto !important; + bottom:0; +} + +@media (max-width: 640px) { + .lil-gui.root{ + top:auto !important; + left:auto !important; + } } diff --git a/example/threejs/sandbox/index.html b/example/threejs/sandbox/index.html index d8356ae..e881bf3 100644 --- a/example/threejs/sandbox/index.html +++ b/example/threejs/sandbox/index.html @@ -12,8 +12,8 @@
- - + + @@ -57,6 +57,7 @@ let camera, scene, renderer, controls; let reflector; let stats, statsMesh; + let vrbutton; const parameters = { env: 1.0, @@ -81,12 +82,12 @@ renderer.domElement.className = "render" document.body.appendChild( renderer.domElement ); - document.body.appendChild( VRButton.createButton( renderer ) ); + document.body.appendChild( vrbutton = VRButton.createButton( renderer ) ); window.addEventListener( 'resize', onWindowResize ); // enable XR fragments - xrfragment.init({ + let XRF = xrfragment.init({ THREE, camera, scene, @@ -96,12 +97,14 @@ }) // optional: extend env fragment - xrfragment.env = (xrf,v,mesh,model,scene,renderer,THREE) => { - xrf(v,mesh,model,scene,renderer,THREE) + XRF.env = (xrf,v,opts) => { + let { mesh, model, camera, scene, renderer, THREE} = opts + xrf(v,opts) } // optional: extend non-xrfragment custom property - xrfragment.name = (xrf,v,mesh,model,scene,renderer,THREE) => { + XRF.name = (xrf,v,opts) => { + let { mesh, model, camera, scene, renderer, THREE} = opts console.log("hello custom property 'name'") } @@ -184,10 +187,14 @@ const gui = new GUI( { width: 300 } ); gui.add( parameters, 'env', 0.2, 3.0, 0.1 ).onChange( onChange ); - //gui.domElement.style.visibility = 'hidden'; const group = new InteractiveGroup( renderer, camera ); - scene.add( group ); + + vrbutton.addEventListener('click', () => { + // show gui inside VR scene + gui.domElement.style.visibility = 'hidden'; + scene.add( group ); + }) const mesh = new HTMLMesh( gui.domElement ); mesh.position.x = - 0.75; diff --git a/src/three/index.js b/src/three/index.js index ab159d4..aa8b1ea 100644 --- a/src/three/index.js +++ b/src/three/index.js @@ -2,9 +2,11 @@ xrfragment.three = {} xrfragment.init = function(opts){ opts = opts || {} - for ( let i in opts ) xrfragment[i] = opts[i] + for ( let i in opts ) xrfragment[i] = opts[i] + for ( let i in xrfragment.XRF ) xrfragment[i] = xrfragment.XRF[i] // shortcuts to constants (BROWSER_OVERRIDE e.g.) xrfragment.Parser.debug = xrfragment.debug if( opts.loaders ) opts.loaders.map( xrfragment.patchLoader ) + return xrfragment } xrfragment.patchLoader = function(loader){ @@ -25,8 +27,9 @@ xrfragment.parseModel = function(model){ xrfragment.Parser.parse( k, mesh.userData[k], frag ) // call native function (xrf/env.js e.g.), or pass it to user decorator let func = xrfragment.three[k] || function(){} - if( xrfragment[k] ) xrfragment[k]( func, frag[k], mesh, model, xrfragment.scene, xrfragment.renderer, xrfragment.THREE ) - else func( frag[k], mesh, model, xrfragment.scene, xrfragment.renderer, xrfragment.THREE ) + let opts = {mesh, model, camera:xrfragment.camera, scene: xrfragment.scene, renderer: xrfragment.renderer, THREE: xrfragment.THREE } + if( xrfragment[k] ) xrfragment[k]( func, frag[k], opts) + else func( frag[k], opts) } } }) diff --git a/src/three/xrf/env.js b/src/three/xrf/env.js index 123a6de..712e6c3 100644 --- a/src/three/xrf/env.js +++ b/src/three/xrf/env.js @@ -1,4 +1,5 @@ -xrfragment.three.env = function(v, mesh, model, scene, renderer, THREE){ +xrfragment.three.env = function(v, opts){ + let { mesh, model, camera, scene, renderer, THREE} = opts let env = mesh.getObjectByName(v.string) env.material.map.mapping = THREE.EquirectangularReflectionMapping; scene.environment = env.material.map diff --git a/src/three/xrf/pos.js b/src/three/xrf/pos.js new file mode 100644 index 0000000..318356b --- /dev/null +++ b/src/three/xrf/pos.js @@ -0,0 +1,6 @@ +xrfragment.three.pos = function(v, opts){ + let { mesh, model, camera, scene, renderer, THREE} = opts + camera.position.x = v.x + camera.position.y = v.y + camera.position.z = v.z +}