mirror of
https://github.com/kevin-DL/gyk-ar.git
synced 2026-01-23 15:21:33 +00:00
Ported over the results from the previous attempt
This commit is contained in:
44
pages/first.html
Normal file
44
pages/first.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<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="./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-anchor hit-testing-enabled="true">
|
||||
</a-anchor> -->
|
||||
<a-marker type="barcode" value="5">
|
||||
<a-box material="opacity: 0.5; side:double; color:red;">
|
||||
<a-text value="Hello, World!"></a-text>
|
||||
</a-box>
|
||||
<a-box material="opacity: 0.5; side:double; color:yellow;" position="1 1 1">
|
||||
<a-text value="Hello, World!"></a-text>
|
||||
</a-box>
|
||||
</a-marker>
|
||||
|
||||
<a-marker type="barcode" value="0">
|
||||
<a-box position="0 1.6 0" animation="property: position; to: 5 1.6 0; dur: 1500; easing: linear"></a-box>
|
||||
<a-entity id="mouseCursor" cursor="rayOrigin: mouse"></a-entity>-->
|
||||
<a-sphere id="sphere" cursor-listener material='opacity: 1; color:red;' position="0 1 0"
|
||||
animation="property: position; to: 0 2 0; dur: 1500; easing: easeInOutCirc; delay:1000; loop: true; dir: alternate; ">
|
||||
-->
|
||||
<!-- <a-animation attribute="position" dur="1000" from="0 1 0" to="0 20 3" repeat="indefinite"></a-animation> -->
|
||||
<a-text value="Wazaa"></a-text>
|
||||
</a-box>
|
||||
</a-marker>
|
||||
|
||||
<a-marker type="barcode" value="1">
|
||||
<a-plane color="#ccc" height="20" width="20" rotation="-45 0 0" scale="0.3 0.3 0.3">
|
||||
<a-text value="TDD" color="#000"></a-text>
|
||||
</a-plane>
|
||||
</a-marker>
|
||||
<!-- <a-camera-static/> -->
|
||||
<a-entity camera look-controls></a-entity>
|
||||
</a-scene>
|
||||
<script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
41
pages/fourth.html
Normal file
41
pages/fourth.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<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>
|
||||
55
pages/second.html
Normal file
55
pages/second.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<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="./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-marker type="barcode" value="5">
|
||||
<a-box material="opacity: 0.5; side:double; color:red;">
|
||||
<a-text value="Hello, World!"></a-text>
|
||||
</a-box>
|
||||
<a-box
|
||||
material="opacity: 0.5; side:double; color:yellow;"
|
||||
position="1 1 1"
|
||||
>
|
||||
<a-text value="Hello, World!"></a-text>
|
||||
</a-box>
|
||||
</a-marker>
|
||||
|
||||
<a-marker type="barcode" value="0">
|
||||
<a-box
|
||||
position="0 1.6 0"
|
||||
animation="property: position; to: 5 1.6 0; dur: 1500; easing: linear"
|
||||
></a-box>
|
||||
<a-sphere
|
||||
id="sphere"
|
||||
cursor-listener
|
||||
material="opacity: 0.5; color:red;"
|
||||
position="0 1 0"
|
||||
animation="property: position; to: 0 2 0; dur: 1500; easing: easeInOutCirc; delay:1000; loop: true; dir: alternate; "
|
||||
>
|
||||
<a-text value="Wazaa"></a-text>
|
||||
</a-sphere>
|
||||
</a-marker>
|
||||
|
||||
<a-marker type="barcode" value="1">
|
||||
<a-plane
|
||||
color="#ccc"
|
||||
height="20"
|
||||
width="20"
|
||||
rotation="-45 0 0"
|
||||
scale="0.3 0.3 0.3"
|
||||
>
|
||||
<a-text value="TDD" color="#000"></a-text>
|
||||
</a-plane>
|
||||
</a-marker>
|
||||
<!-- <a-camera-static/> -->
|
||||
<a-entity camera></a-entity>
|
||||
</a-scene>
|
||||
</body>
|
||||
</html>
|
||||
89
pages/third.html
Normal file
89
pages/third.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<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="./assets/three.js"></script>
|
||||
<script src="./assets/draco.js"></script> -->
|
||||
|
||||
<body style="margin : 0px; overflow: hidden;">
|
||||
<script>
|
||||
AFRAME.registerComponent("markerhandler", {
|
||||
init: function() {
|
||||
const animatedMarker = document.querySelector("#animated-marker");
|
||||
// every click, we make our model grow in size :)
|
||||
animatedMarker.addEventListener("click", function(ev, target) {
|
||||
const intersectedElement =
|
||||
ev && ev.detail && ev.detail.intersectedEl;
|
||||
const aEntity = document.querySelector("#sphere");
|
||||
const yellowSphere = document.querySelector("#yellow-sphere");
|
||||
if (intersectedElement !== undefined) {
|
||||
if (aEntity && intersectedElement === aEntity) {
|
||||
const scale = aEntity.getAttribute("scale");
|
||||
Object.keys(scale).forEach(
|
||||
key => (scale[key] = scale[key] + 1)
|
||||
);
|
||||
aEntity.setAttribute("scale", scale);
|
||||
const material = aEntity.getAttribute("material");
|
||||
Object.keys(material).forEach(key => {
|
||||
if (key === "color") {
|
||||
material[key] = "green";
|
||||
}
|
||||
});
|
||||
aEntity.setAttribute("material", material);
|
||||
}
|
||||
|
||||
if (yellowSphere && intersectedElement === yellowSphere) {
|
||||
const material = yellowSphere.getAttribute("material");
|
||||
Object.keys(material).forEach(key => {
|
||||
if (key === "color") {
|
||||
if (material[key] != "green") {
|
||||
material[key] = "green";
|
||||
} else {
|
||||
material[key] = "red";
|
||||
}
|
||||
}
|
||||
});
|
||||
yellowSphere.setAttribute("material", material);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<a-scene
|
||||
embedded
|
||||
arjs="trackingMethod: best; debugUIEnabled: false sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;"
|
||||
>
|
||||
<a-marker
|
||||
markerhandler
|
||||
id="animated-marker"
|
||||
emitevents="true"
|
||||
cursor="rayOrigin: mouse"
|
||||
raycaster="objects: .clickable"
|
||||
type="barcode"
|
||||
value="0"
|
||||
>
|
||||
<a-entity
|
||||
id="sphere"
|
||||
class="clickable"
|
||||
geometry="primitive: box"
|
||||
material="opacity: 0.5; color:black;"
|
||||
animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: colorChange; dur: 500"
|
||||
animation__mouseenter="property: components.material.material.color; type: color; to: green; startEvents: touchstart; dur: 500"
|
||||
;
|
||||
></a-entity>
|
||||
|
||||
<a-entity
|
||||
id="yellow-sphere"
|
||||
geometry="primitive: box"
|
||||
class="clickable"
|
||||
material="opacity: 0.5; color:yellow;"
|
||||
animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: colorChange; dur: 500"
|
||||
animation__mouseenter="property: components.material.material.color; type: color; to: green; startEvents: touchstart; dur: 500"
|
||||
position="-3 0 0"
|
||||
;
|
||||
></a-entity>
|
||||
</a-marker>
|
||||
<a-entity camera></a-entity>
|
||||
</a-scene>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user