added pos frag starting point

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 )
+        let opts = {mesh, model, camera:xrfragment.camera, scene: xrfragment.scene, renderer: xrfragment.renderer, THREE: xrfragment.THREE }
-        else                                func( frag[k], mesh, model, xrfragment.scene, xrfragment.renderer, 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;

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;
+  }
 }

example/threejs/sandbox/index.html

@@ -12,8 +12,8 @@
     <div id="overlay">
       <img src="./../../assets/logo.png" class="logo"/>
 			<input type="submit" value="load 3D asset"></input>
-			<input type="text" list="urls" value="./example/asset/example1.gltf"/>
+			<input type="text" list="urls" value="./example/asset/example1.gltf#pos=0,2,3"/>
-			<datalist id="urls" x-data="{ urls: ['./example/asset/example1.gltf'] }" >
+      <datalist id="urls" x-data="{ urls: ['./example/asset/example1.gltf#pos=0,2,3'], load: () => alert('load') }" x-on:input="load()">
 				 <template x-for="url in urls">
 						<option x-text="url"></option>
 				</template>
@@ -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.env = (xrf,v,opts) => {
-          xrf(v,mesh,model,scene,renderer,THREE)
+          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;

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 )
+        let opts = {mesh, model, camera:xrfragment.camera, scene: xrfragment.scene, renderer: xrfragment.renderer, THREE: xrfragment.THREE }
-        else                                func( frag[k], mesh, model, xrfragment.scene, xrfragment.renderer, xrfragment.THREE )
+        if(  xrfragment[k] ) xrfragment[k]( func, frag[k], opts)
+        else                                func( frag[k], opts)
       }
     }
   })

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

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
+}