mirror of
https://github.com/kevin-DL/gyk-ar.git
synced 2026-01-11 18:44:33 +00:00
259 lines
8.3 KiB
HTML
259 lines
8.3 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="/js/vue.js"></script>
|
|
<script src="/js/lodash.min.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 markers = document.querySelectorAll(".marker");
|
|
// markers.forEach(marker => {
|
|
// marker.addEventListener("click", function(ev, target) {
|
|
// const intersectedElement =
|
|
// ev && ev.detail && ev.detail.intersectedEl;
|
|
// const parentId = ev.srcElement.id;
|
|
// for (let index = 0; index < 5; index++) {
|
|
// const childId = `${parentId}_${index}`;
|
|
// const intersect = document.getElementById(childId);
|
|
// if (
|
|
// intersectedElement !== undefined &&
|
|
// intersectedElement === intersect
|
|
// ) {
|
|
// console.log(childId);
|
|
// }
|
|
// }
|
|
// });
|
|
// });
|
|
const animatedMarker = document.querySelector("#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 boxes = document.querySelectorAll(".clickable");
|
|
boxes.forEach(element => {
|
|
if (element && intersectedElement === element) {
|
|
// element.click();
|
|
// const material = element.getAttribute("material");
|
|
// Object.keys(material).forEach(key => {
|
|
// material[key] = "green";
|
|
// });
|
|
// element.setAttribute("material", material);
|
|
} else {
|
|
// const material = element.getAttribute("material");
|
|
// Object.keys(material).forEach(key => {
|
|
// if (key === "color") {
|
|
// material[key] = "gray";
|
|
// }
|
|
// });
|
|
// element.setAttribute("material", material);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
<a-scene
|
|
embedded
|
|
arjs="trackingMethod: best; debugUIEnabled: false sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;"
|
|
id="app"
|
|
>
|
|
<!-- <a-marker
|
|
markerhandler
|
|
id="0"
|
|
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-marker
|
|
markerhandler
|
|
id="marker"
|
|
type="barcode"
|
|
emitevents="true"
|
|
cursor="rayOrigin: mouse"
|
|
raycaster="objects: .clickable"
|
|
>
|
|
<a-plane
|
|
v-if="currentQuestion"
|
|
color="#000"
|
|
height="1"
|
|
width="1"
|
|
rotation="-90 0 0"
|
|
position="0 0 -2"
|
|
>
|
|
<a-text
|
|
color="#FFF"
|
|
z-offset="1"
|
|
:value="decodeURIComponent(currentQuestion.question)"
|
|
width="2"
|
|
></a-text>
|
|
</a-plane>
|
|
|
|
<a-plane
|
|
color="#000"
|
|
height="1"
|
|
width="1"
|
|
rotation="-90 0 0"
|
|
position="-2 0 -2"
|
|
>
|
|
<a-text
|
|
color="#FFF"
|
|
z-offset="1"
|
|
value="SCORE"
|
|
width="3"
|
|
position="0 0 1"
|
|
></a-text>
|
|
<a-text color="#FFF" z-offset="1" :value="score" width="2"></a-text>
|
|
</a-plane>
|
|
<!-- <a-entity
|
|
geometry="primitive: plane"
|
|
material="color: #000"
|
|
light="type: point; intensity: 2.0"
|
|
rotation="-90 0 0"
|
|
position="0 0 0"
|
|
scale="2 3 1"
|
|
>
|
|
<a-text
|
|
color="#FFF"
|
|
z-offset="2"
|
|
width="0.5"
|
|
:value="question.question"
|
|
></a-text>
|
|
</a-entity> -->
|
|
<!-- <a-text
|
|
:value="question.question"
|
|
geometry="primitive:plane; primitive: plane; height: 10; width: 10;"
|
|
material="color: #efefef"
|
|
rotation="-90 0 0"
|
|
position="-2 0 0"
|
|
color="#000"
|
|
width="1"
|
|
z-offset="1"
|
|
></a-text> -->
|
|
<a-entity
|
|
v-if="currentQuestion"
|
|
v-for="(response, resp_index) in createResponseArray(currentQuestion.correct_answer, currentQuestion.incorrect_answers)"
|
|
:key="resp_index"
|
|
geometry="primitive: plane"
|
|
class="clickable"
|
|
:material="getColor(resp_index)"
|
|
:position="getPosition(resp_index)"
|
|
scale="0.75 1 1"
|
|
rotation="-90 0 0"
|
|
@click="updateScore(response)"
|
|
>
|
|
<a-text
|
|
color="#FFF"
|
|
z-offset="1"
|
|
:value="decodeURIComponent(response)"
|
|
width="2"
|
|
wrapCount="10"
|
|
></a-text>
|
|
</a-entity>
|
|
</a-marker>
|
|
<a-entity camera></a-entity>
|
|
</a-scene>
|
|
<script>
|
|
const colors = [
|
|
"#462186",
|
|
"#F264F9",
|
|
"#3012AB",
|
|
"#7DC5DB",
|
|
"#B5281B",
|
|
"#C023EA",
|
|
"#83DD1D",
|
|
"#96EFC7",
|
|
"#BB9713",
|
|
"#4EF4BD"
|
|
];
|
|
var app = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
message: "Hello Vue!",
|
|
questions: [],
|
|
currentQuestionIndex: 0,
|
|
currentQuestion: null,
|
|
score: 0
|
|
},
|
|
mounted() {
|
|
console.log(this);
|
|
const vm = this;
|
|
fetch(
|
|
`/.netlify/functions/getQuiz?id=${Math.floor(Math.random() * 11)}`
|
|
)
|
|
.then(function(response) {
|
|
return response.json();
|
|
})
|
|
.then(function(questions) {
|
|
vm.questions = questions;
|
|
vm.currentQuestion = questions[0];
|
|
});
|
|
},
|
|
methods: {
|
|
updateScore(response) {
|
|
if (response == this.currentQuestion.correct_answer) {
|
|
this.score = this.score + 1;
|
|
}
|
|
|
|
if (this.currentQuestionIndex < this.questions.length - 1) {
|
|
this.currentQuestionIndex = this.currentQuestionIndex + 1;
|
|
this.currentQuestion = this.questions[this.currentQuestionIndex];
|
|
} else {
|
|
this.currentQuestion.correct_answer = null;
|
|
this.currentQuestion.incorrect_answers = [];
|
|
}
|
|
},
|
|
createResponseArray(correct, others) {
|
|
return _.shuffle([correct, ...others]);
|
|
},
|
|
|
|
getId(index, resp_index) {
|
|
return `${index}_${resp_index}`;
|
|
},
|
|
getPosition(index) {
|
|
return `${index - 1} 0 0`;
|
|
},
|
|
getRandomColor() {
|
|
var letters = "0123456789ABCDEF";
|
|
var color = "#";
|
|
for (var i = 0; i < 6; i++) {
|
|
color += letters[Math.floor(Math.random() * 16)];
|
|
}
|
|
return color;
|
|
},
|
|
getColor(index) {
|
|
return `opacity: 1; color: ${colors[index]}`;
|
|
}
|
|
}
|
|
});
|
|
window.onload = function() {};
|
|
</script>
|
|
</body>
|
|
</html>
|