coderofsalvation/xrfragment-haxe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update documentation

Browse source
This commit is contained in:
Leon van Kammen 2023-05-04 17:00:55 +02:00
parent 739dc29dd7
commit 7277ac11a8
3 changed files with 27 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
example/assets/style.css
View file

@ -79,4 +79,13 @@ a#source{
font-weight: bold; font-weight: bold;
font-family: sans-serif; font-family: sans-serif;
text-decoration: underline; text-decoration: underline;
z-index:2000;
}
.render {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
} }

14
example/threejs/parser_only/index.html
View file

@ -57,7 +57,7 @@
let stats, statsMesh; let stats, statsMesh;
const parameters = { const parameters = {
light: 1.0, env: 1.0,
}; };
init(); init();
@ -79,7 +79,8 @@
//model.dispose() //model.dispose()
} }
gltf.scene.position.y = 1.5 gltf.scene.position.y = 1.5
gltf.scene.position.z = -1 gltf.scene.position.z = -4
gltf.scene.rotation.y = -0.5
gltf.scene.scale.x = gltf.scene.scale.y = gltf.scene.scale.z = 1; gltf.scene.scale.x = gltf.scene.scale.y = gltf.scene.scale.z = 1;
const maxAnisotropy = renderer.capabilities.getMaxAnisotropy(); const maxAnisotropy = renderer.capabilities.getMaxAnisotropy();
@ -138,6 +139,7 @@
renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputEncoding = THREE.sRGBEncoding; renderer.outputEncoding = THREE.sRGBEncoding;
renderer.xr.enabled = true; renderer.xr.enabled = true;
renderer.domElement.className = "render"
document.body.appendChild( renderer.domElement ); document.body.appendChild( renderer.domElement );
document.body.appendChild( VRButton.createButton( renderer ) ); document.body.appendChild( VRButton.createButton( renderer ) );
@ -187,11 +189,11 @@
// GUI // GUI
function onChange() { function onChange() {
renderer.toneMappingExposure = parameters.light; renderer.toneMappingExposure = parameters.env;
} }
const gui = new GUI( { width: 300 } ); const gui = new GUI( { width: 300 } );
gui.add( parameters, 'light', 0.2, 3.0, 0.1 ).onChange( onChange ); gui.add( parameters, 'env', 0.2, 3.0, 0.1 ).onChange( onChange );
gui.domElement.style.visibility = 'hidden'; gui.domElement.style.visibility = 'hidden';
const group = new InteractiveGroup( renderer, camera ); const group = new InteractiveGroup( renderer, camera );
@ -200,7 +202,7 @@
const mesh = new HTMLMesh( gui.domElement ); const mesh = new HTMLMesh( gui.domElement );
mesh.position.x = - 0.75; mesh.position.x = - 0.75;
mesh.position.y = 1.5; mesh.position.y = 1.5;
mesh.position.z = - 0.5; mesh.position.z = 0.3;
mesh.rotation.y = Math.PI / 4; mesh.rotation.y = Math.PI / 4;
mesh.scale.setScalar( 2 ); mesh.scale.setScalar( 2 );
group.add( mesh ); group.add( mesh );
@ -215,7 +217,7 @@
statsMesh = new HTMLMesh( stats.dom ); statsMesh = new HTMLMesh( stats.dom );
statsMesh.position.x = - 0.75; statsMesh.position.x = - 0.75;
statsMesh.position.y = 2; statsMesh.position.y = 2;
statsMesh.position.z = - 0.6; statsMesh.position.z = 0.3;
statsMesh.rotation.y = Math.PI / 4; statsMesh.rotation.y = Math.PI / 4;
statsMesh.scale.setScalar( 2.5 ); statsMesh.scale.setScalar( 2.5 );
group.add( statsMesh ); group.add( statsMesh );

18
example/threejs/sandbox/index.html
View file

@ -59,7 +59,7 @@
let stats, statsMesh; let stats, statsMesh;
const parameters = { const parameters = {
light: 1.0, env: 1.0,
}; };
init(); init();
@ -78,6 +78,7 @@
renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputEncoding = THREE.sRGBEncoding; renderer.outputEncoding = THREE.sRGBEncoding;
renderer.xr.enabled = true; renderer.xr.enabled = true;
renderer.domElement.className = "render"
document.body.appendChild( renderer.domElement ); document.body.appendChild( renderer.domElement );
document.body.appendChild( VRButton.createButton( renderer ) ); document.body.appendChild( VRButton.createButton( renderer ) );
@ -94,12 +95,12 @@
loaders: [ GLTFLoader ], // which assets to check for fragments? loaders: [ GLTFLoader ], // which assets to check for fragments?
}) })
// decorate env fragment // optional: extend env fragment
xrfragment.env = (xrf,v,mesh,model,scene,renderer,THREE) => { xrfragment.env = (xrf,v,mesh,model,scene,renderer,THREE) => {
xrf(v,mesh,model,scene,renderer,THREE) xrf(v,mesh,model,scene,renderer,THREE)
} }
// decorate non-xrfragment custom property // optional: extend non-xrfragment custom property
xrfragment.name = (xrf,v,mesh,model,scene,renderer,THREE) => { xrfragment.name = (xrf,v,mesh,model,scene,renderer,THREE) => {
console.log("hello custom property 'name'") console.log("hello custom property 'name'")
} }
@ -113,7 +114,8 @@
//model.dispose() //model.dispose()
} }
gltf.scene.position.y = 1.5 gltf.scene.position.y = 1.5
gltf.scene.position.z = -1 gltf.scene.position.z = -4
gltf.scene.rotation.y = -0.5
gltf.scene.scale.x = gltf.scene.scale.y = gltf.scene.scale.z = 1; gltf.scene.scale.x = gltf.scene.scale.y = gltf.scene.scale.z = 1;
const maxAnisotropy = renderer.capabilities.getMaxAnisotropy(); const maxAnisotropy = renderer.capabilities.getMaxAnisotropy();
@ -177,11 +179,11 @@
// GUI // GUI
function onChange() { function onChange() {
renderer.toneMappingExposure = parameters.light; renderer.toneMappingExposure = parameters.env;
} }
const gui = new GUI( { width: 300 } ); const gui = new GUI( { width: 300 } );
gui.add( parameters, 'light', 0.2, 3.0, 0.1 ).onChange( onChange ); gui.add( parameters, 'env', 0.2, 3.0, 0.1 ).onChange( onChange );
gui.domElement.style.visibility = 'hidden'; gui.domElement.style.visibility = 'hidden';
const group = new InteractiveGroup( renderer, camera ); const group = new InteractiveGroup( renderer, camera );
@ -190,7 +192,7 @@
const mesh = new HTMLMesh( gui.domElement ); const mesh = new HTMLMesh( gui.domElement );
mesh.position.x = - 0.75; mesh.position.x = - 0.75;
mesh.position.y = 1.5; mesh.position.y = 1.5;
mesh.position.z = - 0.5; mesh.position.z = 0.3;
mesh.rotation.y = Math.PI / 4; mesh.rotation.y = Math.PI / 4;
mesh.scale.setScalar( 2 ); mesh.scale.setScalar( 2 );
group.add( mesh ); group.add( mesh );
@ -205,7 +207,7 @@
statsMesh = new HTMLMesh( stats.dom ); statsMesh = new HTMLMesh( stats.dom );
statsMesh.position.x = - 0.75; statsMesh.position.x = - 0.75;
statsMesh.position.y = 2; statsMesh.position.y = 2;
statsMesh.position.z = - 0.6; statsMesh.position.z = 0.3;
statsMesh.rotation.y = Math.PI / 4; statsMesh.rotation.y = Math.PI / 4;
statsMesh.scale.setScalar( 2.5 ); statsMesh.scale.setScalar( 2.5 );
group.add( statsMesh ); group.add( statsMesh );