2024-06-12 16:59:49 +02:00
|
|
|
<!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" />
|
|
|
|
|
</head>
|
2024-06-13 11:20:14 +02:00
|
|
|
<body style="overflow:hidden; padding:10%">
|
|
|
|
|
|
|
|
|
|
<h1><model-viewer> example</h1>
|
2024-07-12 18:19:19 +02:00
|
|
|
<br><br>
|
2024-07-11 17:46:43 +02:00
|
|
|
|
2024-07-12 18:19:19 +02:00
|
|
|
<model-viewer
|
|
|
|
|
src="./../assets/index.glb"
|
2024-07-15 15:15:11 +02:00
|
|
|
ar alt="XR Fragments demo scene"camera-controls touch-action="none" disable-tap
|
|
|
|
|
field-of-view="80deg" min-field-of-view="25deg" max-field-of-view="100deg"
|
|
|
|
|
interpolation-decay="200" camera-target="0m 0m 0m" min-camera-orbit="0.1% 0.1% 0.1%"
|
2024-07-12 18:19:19 +02:00
|
|
|
style="width:80%; height:50vh; border-radius:5px; border:1px solid #CCC"
|
|
|
|
|
>
|
|
|
|
|
</model-viewer>
|
2024-06-13 11:20:14 +02:00
|
|
|
|
2024-07-17 13:07:35 +02:00
|
|
|
<script src="./../../dist/xrfragment.aframe.all.js"></script>
|
2024-07-15 15:15:11 +02:00
|
|
|
<script>
|
2024-07-17 13:07:35 +02:00
|
|
|
const enableXRF = (mv) => {
|
|
|
|
|
console.dir(mv)
|
2024-06-12 16:59:49 +02:00
|
|
|
|
2024-07-17 13:07:35 +02:00
|
|
|
let opts = {
|
|
|
|
|
arButton: mv[getSymbol(mv,'arButtonContainer')],
|
|
|
|
|
editButton: null,
|
2024-07-11 17:46:43 +02:00
|
|
|
}
|
|
|
|
|
|
2024-07-17 13:07:35 +02:00
|
|
|
overrideARButton(opts)
|
|
|
|
|
createEditButton(opts)
|
2024-06-13 11:20:14 +02:00
|
|
|
|
2024-07-17 13:07:35 +02:00
|
|
|
console.dir(opts)
|
2024-07-11 17:46:43 +02:00
|
|
|
}
|
|
|
|
|
|
2024-07-17 13:07:35 +02:00
|
|
|
const overrideARButton = (opts) => {
|
|
|
|
|
const arButton = opts.arButton.cloneNode(true)
|
|
|
|
|
opts.arButton.parentNode.appendChild( arButton )
|
|
|
|
|
opts.arButton.remove()
|
|
|
|
|
opts.arButton = arButton
|
|
|
|
|
opts.arButton.addEventListener('click', () => alert("hoi"))
|
2024-07-12 18:19:19 +02:00
|
|
|
}
|
|
|
|
|
|
2024-07-17 13:07:35 +02:00
|
|
|
const createEditButton = (opts) => {
|
|
|
|
|
opts.editButton = opts.arButton.querySelector('a').cloneNode(true)
|
|
|
|
|
opts.editButton.innerHTML = `
|
|
|
|
|
<svg
|
|
|
|
|
width="24"
|
|
|
|
|
height="24"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
fill="none"
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
>
|
|
|
|
|
<path
|
|
|
|
|
fill-rule="evenodd"
|
|
|
|
|
clip-rule="evenodd"
|
|
|
|
|
d="M21.2635 2.29289C20.873 1.90237 20.2398 1.90237 19.8493 2.29289L18.9769 3.16525C17.8618 2.63254 16.4857 2.82801 15.5621 3.75165L4.95549 14.3582L10.6123 20.0151L21.2189 9.4085C22.1426 8.48486 22.338 7.1088 21.8053 5.99367L22.6777 5.12132C23.0682 4.7308 23.0682 4.09763 22.6777 3.70711L21.2635 2.29289ZM16.9955 10.8035L10.6123 17.1867L7.78392 14.3582L14.1671 7.9751L16.9955 10.8035ZM18.8138 8.98525L19.8047 7.99429C20.1953 7.60376 20.1953 6.9706 19.8047 6.58007L18.3905 5.16586C18 4.77534 17.3668 4.77534 16.9763 5.16586L15.9853 6.15683L18.8138 8.98525Z"
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
/>
|
|
|
|
|
<path
|
|
|
|
|
d="M2 22.9502L4.12171 15.1717L9.77817 20.8289L2 22.9502Z"
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
2024-07-15 15:15:11 +02:00
|
|
|
`
|
2024-07-17 13:07:35 +02:00
|
|
|
opts.editButton.id = "edit-button"
|
|
|
|
|
opts.editButton.style.bottom = '16px'
|
|
|
|
|
opts.editButton.style.left = '16px'
|
|
|
|
|
opts.editButton.style.color = 'black'
|
|
|
|
|
opts.editButton.style.position = 'absolute'
|
|
|
|
|
opts.editButton.addEventListener('click', () => alert("hoi") )
|
|
|
|
|
opts.arButton.querySelector('a').parentNode.appendChild(opts.editButton)
|
2024-06-13 11:20:14 +02:00
|
|
|
}
|
|
|
|
|
|
2024-07-17 13:07:35 +02:00
|
|
|
function getSymbol(mv,name) {
|
|
|
|
|
let obj = mv;
|
|
|
|
|
do {
|
|
|
|
|
const sym = Object.getOwnPropertySymbols(obj).find( (x) => x.description === name);
|
|
|
|
|
if (sym) { return sym; }
|
|
|
|
|
} while ((obj = Object.getPrototypeOf(obj)));
|
2024-06-13 11:20:14 +02:00
|
|
|
}
|
|
|
|
|
|
2024-07-17 13:07:35 +02:00
|
|
|
const mvs = [...document.querySelectorAll('model-viewer')]
|
|
|
|
|
mvs.map( (mv) => {
|
|
|
|
|
mv.addEventListener('load', () => enableXRF(mv) )
|
|
|
|
|
// prevent loading in model-viewer mode
|
|
|
|
|
mv.setAttribute('xrf', mv.src )
|
|
|
|
|
mv.removeAttribute('src')
|
|
|
|
|
})
|
2024-06-12 16:59:49 +02:00
|
|
|
</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>
|
