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

feat/model-viewer: work in progress [might break]

Browse source
This commit is contained in:
Leon van Kammen 2024-06-12 14:59:49 +00:00
parent eb66d0a496
commit 7da6efaee8
3 changed files with 97 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
example/model-viewer/index.html Normal file
View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>&lt;model-viewer&gt; template</title>
<meta charset="utf-8" />
<meta name="description" content="&lt;model-viewer&gt; template" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link type="text/css" href="./styles.css" rel="stylesheet" />
</head>
<style type="text/css">
#url,
.btn { display:inline-block;width:40px; height:40px; background:#EEE; font-weight:bold; border-radius:5px; margin-right:5px; text-align:center; line-height:41px; }
#url { width:100%; max-width: calc(100% - 140px); text-align:left; padding:0px 10px; font-weight:normal; }
</style>
<body style="overflow:hidden">
<!-- <model-viewer> HTML element -->
<model-viewer
src="https://xrfragment.org/index.glb"
environment-image="https://cdn.glitch.global/8e507517-31ff-4aa5-80c1-10ea6de9483d/white_furnace.hdr"
disable-zoom
touch-action="non"
style="width:100%; height:99vh"
>
<b class="btn" id="back">&lt;</b>
<b class="btn" id="forward">&gt;</b>
<input id="url" value=""></b>
</model-viewer>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.165.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.165.0/examples/jsm/"
}
}
</script>
<script type="module">
import xrf from "./../../../dist/xrfragment.three.module.js";
import * as THREE from 'three'; // *TODO* get three handle from mv
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
import { USDZLoader } from 'three/addons/loaders/USDZLoader.js';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
const mv = document.querySelector("model-viewer");
const $url = document.querySelector('#url')
function getSymbol(name) {
let obj = mv;
do {
const sym = Object.getOwnPropertySymbols(obj).find(
(x) => x.description === name
);
if (sym) {
return sym;
}
} while ((obj = Object.getPrototypeOf(obj)));
}
mv.addEventListener("load", () => {
const opts = {
THREE,
scene: mv[getSymbol('scene')],
renderer: mv[getSymbol("renderer")].threeRenderer,
controls: mv[getSymbol("controls")],
camera: mv[getSymbol("scene")].getCamera()
}
opts.scene.add( opts.camera ) // not sure why is camera not in the scene?
setInterval( () => {
opts.camera.position.set( 0,0,0 )
opts.camera.updateMatrix()
},1000)
$url.value = mv.src
window.opts = opts
// enable XR fragments
let XRF = xrf.init({...opts,
loaders: { gltf: GLTFLoader, glb: GLTFLoader, fbx: FBXLoader, obj: OBJLoader, usdz: USDZLoader }
})
console.dir(XRF)
});
</script>
<!-- Loads <model-viewer> for browsers: -->
<script
type="module"
src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"
></script>
</body>
</html>

11
example/three/sandbox/index.html
View file

@ -42,7 +42,6 @@
import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js'; import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
import { OculusHandModel } from 'three/addons/webxr/OculusHandModel.js'; import { OculusHandModel } from 'three/addons/webxr/OculusHandModel.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import Stats from 'three/addons/libs/stats.module.js'; import Stats from 'three/addons/libs/stats.module.js';
window.$ = (s) => document.querySelector(s) window.$ = (s) => document.querySelector(s)
@ -165,16 +164,19 @@
const handModel1 = new OculusHandModel( hand1 ); const handModel1 = new OculusHandModel( hand1 );
hand1.add( handModel1 ); hand1.add( handModel1 );
cameraRig.add( hand1 ); cameraRig.add( hand1 );
console.dir(hand1)
const controllerGrip2 = renderer.xr.getControllerGrip( 1 ); const controllerGrip2 = renderer.xr.getControllerGrip( 1 );
controllerGrip2.add( controllerModelFactory.createControllerModel( controllerGrip2 ) ); controllerGrip2.add( controllerModelFactory.createControllerModel( controllerGrip2 ) );
cameraRig.add( controllerGrip2 ); cameraRig.add( controllerGrip2 );
console.dir(hand1)
// hand2 // hand2
const hand2 = renderer.xr.getHand( 1 ); const hand2 = renderer.xr.getHand( 1 );
const handModel2 = new OculusHandModel( hand2 ); const handModel2 = new OculusHandModel( hand2 );
hand2.add( handModel2 ); hand2.add( handModel2 );
cameraRig.add( hand2 ); cameraRig.add( hand2 );
console.dir(hand2)
// Add stats.js // Add stats.js
stats = new Stats(); stats = new Stats();
@ -190,9 +192,6 @@
statsMesh.scale.setScalar( 2.5 ); statsMesh.scale.setScalar( 2.5 );
vrbutton.addEventListener('click', () => { vrbutton.addEventListener('click', () => {
// show gui inside VR scene
gui.domElement.style.visibility = 'hidden';
XRF.interactive.add( mesh );
XRF.interactive.add( statsMesh ); XRF.interactive.add( statsMesh );
}) })
@ -219,8 +218,8 @@
let fileLoaders = loadFile({ let fileLoaders = loadFile({
".gltf": (file) => file.arrayBuffer().then( (data) => XRF.navigator.to(file.name,null,XRF.loaders.gltf,data) ), ".gltf": (file) => file.arrayBuffer().then( (data) => xrf.navigator.to(file.name,null, (new xrf.loaders.gltf()), data) ),
".glb": (file) => file.arrayBuffer().then( (data) => XRF.navigator.to(file.name,null, XRF.loaders.gltf,data) ) ".glb": (file) => file.arrayBuffer().then( (data) => xrf.navigator.to(file.name,null, (new xrf.loaders.gltf()), data) )
}) })
$("input[type=submit]").addEventListener("click", fileLoaders ) $("input[type=submit]").addEventListener("click", fileLoaders )

2
src/3rd/js/three/xrf/src/non-euclidian.js
View file

@ -120,7 +120,7 @@ xrf.portalNonEuclidian = function(opts){
if( mesh.userData.XRF.href ){ if( mesh.userData.XRF.href ){
raycaster.far = 0.35 raycaster.far = 0.35
raycaster.set(cameraPosition, cameraDirection ) raycaster.set(cameraPosition, cameraDirection )
intersects = raycaster.intersectObjects([mesh], false) let intersects = raycaster.intersectObjects([mesh], false)
if (intersects.length > 0 && !mesh.portal.teleporting ){ if (intersects.length > 0 && !mesh.portal.teleporting ){
mesh.portal.teleporting = true mesh.portal.teleporting = true
mesh.userData.XRF.href.exec({nocommit:true}) mesh.userData.XRF.href.exec({nocommit:true})