feat/model-viewer: work in progress [might break]
This commit is contained in:
parent
eb66d0a496
commit
7da6efaee8
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title><model-viewer> template</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="<model-viewer> 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"><</b>
|
||||
<b class="btn" id="forward">></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>
|
||||
|
|
@ -42,7 +42,6 @@
|
|||
import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
|
||||
import { OculusHandModel } from 'three/addons/webxr/OculusHandModel.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';
|
||||
|
||||
window.$ = (s) => document.querySelector(s)
|
||||
|
|
@ -165,16 +164,19 @@
|
|||
const handModel1 = new OculusHandModel( hand1 );
|
||||
hand1.add( handModel1 );
|
||||
cameraRig.add( hand1 );
|
||||
console.dir(hand1)
|
||||
|
||||
const controllerGrip2 = renderer.xr.getControllerGrip( 1 );
|
||||
controllerGrip2.add( controllerModelFactory.createControllerModel( controllerGrip2 ) );
|
||||
cameraRig.add( controllerGrip2 );
|
||||
console.dir(hand1)
|
||||
|
||||
// hand2
|
||||
const hand2 = renderer.xr.getHand( 1 );
|
||||
const handModel2 = new OculusHandModel( hand2 );
|
||||
hand2.add( handModel2 );
|
||||
cameraRig.add( hand2 );
|
||||
console.dir(hand2)
|
||||
|
||||
// Add stats.js
|
||||
stats = new Stats();
|
||||
|
|
@ -190,9 +192,6 @@
|
|||
statsMesh.scale.setScalar( 2.5 );
|
||||
|
||||
vrbutton.addEventListener('click', () => {
|
||||
// show gui inside VR scene
|
||||
gui.domElement.style.visibility = 'hidden';
|
||||
XRF.interactive.add( mesh );
|
||||
XRF.interactive.add( statsMesh );
|
||||
})
|
||||
|
||||
|
|
@ -219,8 +218,8 @@
|
|||
|
||||
|
||||
let fileLoaders = loadFile({
|
||||
".gltf": (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, 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, (new xrf.loaders.gltf()), data) )
|
||||
})
|
||||
$("input[type=submit]").addEventListener("click", fileLoaders )
|
||||
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ xrf.portalNonEuclidian = function(opts){
|
|||
if( mesh.userData.XRF.href ){
|
||||
raycaster.far = 0.35
|
||||
raycaster.set(cameraPosition, cameraDirection )
|
||||
intersects = raycaster.intersectObjects([mesh], false)
|
||||
let intersects = raycaster.intersectObjects([mesh], false)
|
||||
if (intersects.length > 0 && !mesh.portal.teleporting ){
|
||||
mesh.portal.teleporting = true
|
||||
mesh.userData.XRF.href.exec({nocommit:true})
|
||||
|
|
|
|||
Loading…
Reference in New Issue