mirror of
https://github.com/kevin-DL/gyk-ar.git
synced 2026-01-11 18:44:33 +00:00
41 lines
2.0 KiB
HTML
41 lines
2.0 KiB
HTML
<html>
|
|
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
|
|
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.5/aframe/build/aframe-ar.js"></script>
|
|
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js"></script>
|
|
<!-- <script src="./assets/three.js"></script>
|
|
<script src="./assets/draco.js"></script> -->
|
|
|
|
<body style="margin : 0px; overflow: hidden;">
|
|
<a-scene embedded
|
|
arjs="trackingMethod: best; debugUIEnabled: false sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
|
|
<a-assets>
|
|
<a-asset-item id="bike" src="/models/scene.gltf">
|
|
<a-asset-item id="girl" src="/models/scene_girl/scene.gltf">
|
|
<a-asset-item id="skene" src="/models/skene3/scene.gltf"></a-asset-item>
|
|
</a-assets>
|
|
|
|
<!-- Using the asset management system. -->
|
|
|
|
|
|
<!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
|
|
<!-- <a-gltf-model src="models/scene.gltf"></a-gltf-model> -->
|
|
<a-marker markerhandler id="animated-marker" emitevents="true" cursor="rayOrigin: mouse"
|
|
raycaster="objects: .clickable" type="barcode" value="0">
|
|
<!-- <a-entity gltf-model="#earthquake" scale="0.01 0.01 0.01" animation-mixer></a-entity> -->
|
|
<a-entity id="skeneObject" gltf-model="#skene" scale="0.1 0.1 0.1" animation-mixer position="-1 0 0">
|
|
</a-entity>
|
|
<!-- <a-entity gltf-model="#bike" scale="0.5 0.5 0.5" animation-mixer></a-entity>
|
|
<a-entity gltf-model="#girl" scale="0.01 0.01 0.01" position="0 0 0" rotation="0 90 0" animation-mixer></a-entity> -->
|
|
</a-marker>
|
|
<a-entity camera></a-entity>
|
|
</a-scene>
|
|
|
|
<script>
|
|
setTimeout(() => {
|
|
console.log(document.querySelector("#skeneObject"))
|
|
// const entity = document.querySelector("#skene").play()
|
|
}, 3000);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |