mirror of
https://github.com/kevin-DL/gyk-ar.git
synced 2026-01-11 18:44:33 +00:00
Trying to display the text on the plane
This commit is contained in:
223
pages/fifth.html
Normal file
223
pages/fifth.html
Normal file
@@ -0,0 +1,223 @@
|
||||
<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="./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;"
|
||||
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
|
||||
v-for="(question, index) in questions"
|
||||
:key="index"
|
||||
type="barcode"
|
||||
:value="index"
|
||||
>
|
||||
<!-- <a-plane color="#000" height="1" width="1" rotation="-90 0 0">
|
||||
<a-text color="#FFF" z-offset="2" :value="question.question"></a-text>
|
||||
</a-plane> -->
|
||||
<a-entity
|
||||
geometry="primitive: plane"
|
||||
material="color: #000"
|
||||
light="type: point; intensity: 2.0"
|
||||
rotation="90 0 0"
|
||||
>
|
||||
<a-text color="#FFF" z-offset="2" :value="question.question"></a-text>
|
||||
</a-entity>
|
||||
</a-marker>
|
||||
<a-entity camera></a-entity>
|
||||
</a-scene>
|
||||
<script>
|
||||
const questions = [
|
||||
{
|
||||
category: "Science: Computers",
|
||||
type: "multiple",
|
||||
difficulty: "easy",
|
||||
question:
|
||||
"In any programming language, what is the most common way to iterate through an array?",
|
||||
correct_answer: "'For' loops",
|
||||
incorrect_answers: [
|
||||
"'If' Statements",
|
||||
"'Do-while' loops",
|
||||
"'While' loops"
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "Science: Computers",
|
||||
type: "multiple",
|
||||
difficulty: "easy",
|
||||
question: "What does the "MP" stand for in MP3?",
|
||||
correct_answer: "Moving Picture",
|
||||
incorrect_answers: ["Music Player", "Multi Pass", "Micro Point"]
|
||||
},
|
||||
{
|
||||
category: "Science: Computers",
|
||||
type: "multiple",
|
||||
difficulty: "easy",
|
||||
question:
|
||||
"Which computer hardware device provides an interface for all other connected devices to communicate?",
|
||||
correct_answer: "Motherboard",
|
||||
incorrect_answers: [
|
||||
"Central Processing Unit",
|
||||
"Hard Disk Drive",
|
||||
"Random Access Memory"
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "Science: Computers",
|
||||
type: "multiple",
|
||||
difficulty: "easy",
|
||||
question:
|
||||
"In the programming language Java, which of these keywords would you put on a variable to make sure it doesn't get modified?",
|
||||
correct_answer: "Final",
|
||||
incorrect_answers: ["Static", "Private", "Public"]
|
||||
},
|
||||
{
|
||||
category: "Science: Computers",
|
||||
type: "multiple",
|
||||
difficulty: "easy",
|
||||
question:
|
||||
"If you were to code software in this language you'd only be able to type 0's and 1's.",
|
||||
correct_answer: "Binary",
|
||||
incorrect_answers: ["JavaScript", "C++", "Python"]
|
||||
},
|
||||
{
|
||||
category: "Science: Computers",
|
||||
type: "multiple",
|
||||
difficulty: "easy",
|
||||
question:
|
||||
"What is the most preferred image format used for logos in the Wikimedia database?",
|
||||
correct_answer: ".svg",
|
||||
incorrect_answers: [".png", ".jpeg", ".gif"]
|
||||
},
|
||||
{
|
||||
category: "Science: Computers",
|
||||
type: "multiple",
|
||||
difficulty: "easy",
|
||||
question: "In web design, what does CSS stand for?",
|
||||
correct_answer: "Cascading Style Sheet",
|
||||
incorrect_answers: [
|
||||
"Counter Strike: Source",
|
||||
"Corrective Style Sheet",
|
||||
"Computer Style Sheet"
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "Science: Computers",
|
||||
type: "multiple",
|
||||
difficulty: "easy",
|
||||
question: "How many kilobytes in one gigabyte?",
|
||||
correct_answer: "1000000",
|
||||
incorrect_answers: ["1024", "1000", "1048576"]
|
||||
},
|
||||
{
|
||||
category: "Science: Computers",
|
||||
type: "multiple",
|
||||
difficulty: "easy",
|
||||
question: "What does LTS stand for in the software market?",
|
||||
correct_answer: "Long Term Support",
|
||||
incorrect_answers: [
|
||||
"Long Taco Service",
|
||||
"Ludicrous Transfer Speed",
|
||||
"Ludicrous Turbo Speed"
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "Science: Computers",
|
||||
type: "multiple",
|
||||
difficulty: "easy",
|
||||
question:
|
||||
"Which programming language shares its name with an island in Indonesia?",
|
||||
correct_answer: "Java",
|
||||
incorrect_answers: ["Python", "C", "Jakarta"]
|
||||
}
|
||||
];
|
||||
var app = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
message: "Hello Vue!",
|
||||
questions
|
||||
}
|
||||
});
|
||||
window.onload = function() {};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user