/    Sign up×
Community /Pin to ProfileBookmark

Im new to coding and need help changing a few lines of this code.

I would like to be able to have images appear when the markers are read. The way this setup is now it shows the marker id.

[code]
var markersURLArray=[];
var markersNameArray=[];
AFRAME.registerComponent(‘markers_start’,{
init:function(){
console.log(‘Add markers to the scene’);
var sceneEl = document.querySelector(‘a-scene’);

//lists of the markers
for(var i=1; i<19; i++)
{
var url=”resources/markers/pattern-Individual_Blocks-“+i+”.patt”;
markersURLArray.push(url);
markersNameArray.push(‘Marker_’+i);
}
for(var k=0; k<18; k++)
{
var markerEl = document.createElement(‘a-marker’);
markerEl.setAttribute(‘type’,’pattern’);
markerEl.setAttribute(‘url’,markersURLArray[k]);
markerEl.setAttribute(‘id’,markersNameArray[k]);
markerEl.setAttribute(‘registerevents’,”);
sceneEl.appendChild(markerEl);
//Adding a text to each marker
var textEl = document.createElement(‘a-entity’);

textEl.setAttribute(‘id’,’text’);
textEl.setAttribute(‘text’,{color: ‘red’, align: ‘center’, value:markersNameArray[k], width: ‘5.5’});
textEl.object3D.position.set(0, 0.7, 0);
textEl.object3D.rotation.set(-90, 0, 0);
markerEl.appendChild(textEl);
}
}
});
[/code]

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@NogDogNov 02.2022 — @josephyoung81#1648243 -- welcome to the forums. I edited your post to wrap the code block in this forum's ... tags. Please be sure to use them in future posts to aid readability. :)

Hopefully one of our client-side experts will be by soon to look at your question.
Copy linkTweet thisAlerts:
@SempervivumNov 04.2022 — @josephyoung81#1648243 welcome to the forum from my side either.

I took a look at a-frame, cool stuff.

I fiddled around with your code and it was fairly easy to display an image instead of text:
``<i>
</i> for (var k = 0; k &lt; markersURLArray.length; k++) {
var markerEl = document.createElement('a-marker');
markerEl.setAttribute('type', 'pattern');
markerEl.setAttribute('url', markersURLArray[k]);
markerEl.setAttribute('id', markersNameArray[k]);
markerEl.setAttribute('registerevents', '');
sceneEl.appendChild(markerEl);
//Adding an image to each marker
var imgEl = document.createElement('a-image');

imgEl.setAttribute('id', 'img' + k);
imgEl.setAttribute('src', markersImgArray[k]);
imgEl.object3D.position.set(0, 0, 0);
imgEl.object3D.rotation.set(-90, 0, 0);
markerEl.appendChild(imgEl);
}<i>
</i>
``

Define an array markersImgArray for the urls of the images in order to assign them specific to the marker.
×

Success!

Help @josephyoung81 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...