coderofsalvation
/
xrfragment
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added pos frag starting point

This commit is contained in:
Leon van Kammen 2023-05-04 21:28:12 +02:00
parent 1c3e01da3e
commit b3e9736db1
6 changed files with 53 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
dist/xrfragment.three.js vendored
View File

@ -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;

10
example/assets/style.css
View File

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

25
example/threejs/sandbox/index.html
View File

@ -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"/>
<datalist id="urls" x-data="{ urls: ['./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#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(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;

9
src/three/index.js
View File

@ -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)
}
}
})

3
src/three/xrf/env.js
View File

@ -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

6
src/three/xrf/pos.js Normal file
View File

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