Comments (16)
@JesusR25 set the fov
property of the a-camera
, e.g.
<a-camera fov='45' .... />
See docs:
https://aframe.io/docs/1.3.0/components/camera.html
from ar.js.
Hi @JesusR25 are you looking at up-to-date examples?
Make sure you set up cursor
and raycaster
components, e.g see this example:
from ar.js.
Hi @nickw1 In my case, to solve the click on the models, I only need to add the lines?
cursor='rayOrigin: mouse'
raycaster='near: 0; far: 50000'
I also copied the example and for some reason nothing appears, do I have to change the latitude and longitude values? Replace the libraries with the links. This is how it turned out:
<!DOCTYPE html>
<html>
<head>
<title>AR.js Click Places Example</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src='https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex-location-only.js'></script>
<script src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js'></script>
<script>
AFRAME.registerComponent('clicker', {
init: function() {
this.el.addEventListener('click', e => {
alert('Box clicked!');
});
}
});
</script>
</head>
<body>
<a-scene
vr-mode-ui="enabled: false"
cursor='rayOrigin: mouse'
raycaster='near: 0; far: 50000'
arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'
renderer='antialias: true; alpha: true'>
<a-camera gps-new-camera='simulateLatitude: 51.049; simulateLongitude: -0.723'></a-camera>
<a-box gps-new-entity-place='latitude: 51.0596; longitude: -0.7170' color='red' scale='200 200 200' clicker></a-box>
</a-scene>
</body>
</html>
from ar.js.
@nickw1 I was able to show the page on my PC, but the cube does not appear on my cell phone, is it because of the latitude and longitude? And how to apply the click for a marker?
from ar.js.
@JesusR25 this is probably because the GPS on your phone overrides the simulated latitude and longitude, so you move away from the simulated location and therefore do not see the box. If you add the box at somewhere close to (0.001 degrees from) your actual location you should see it.
I am not sure about markers I have to admit, but if they are models, you can add click events to them just like you can with primitive objects such as boxes, spheres, etc.
from ar.js.
Hi @nickw1 In my case, to solve the click on the models, I only need to add the lines? cursor='rayOrigin: mouse' raycaster='near: 0; far: 50000'
Yes, that's correct, that will set up the scene to receive click events. Essentially a ray is cast into the scene from the mouse click position (on the surface) and any object intersecting this ray will receive a click event. The raycaster
component defines the distance range of this ray.
from ar.js.
Hi @nickw1 , I tried to add the raycaster and cursor, it works for me in the first model, but when I add another model and try to add another method to detect the touch of this second model, it doesn't detect it on the model but on another side of the map, I already tried of all and I have not been able to get it to work. I don't know if it's a marker problem.
from ar.js.
Hi @JesusR25 I'm not too sure to be honest, as you can certainly set up click events on multiple entities in the same scene. Are you able to share your code?
from ar.js.
Hi @nickw1 , my code is in my repository, this is the link:
https://github.com/JesusR25/Bacubirito-WebXR/blob/master/pagina/Prueba.html
from ar.js.
Hi @JesusR25, the cursor
and raycaster
components need to be added to the a-scene
.
See https://github.com/AR-js-org/AR.js/blob/master/aframe/examples/new-location-based/click-places/index.html for an example.
from ar.js.
Hi @nickw1 , I just tried that, but the click on the models no longer recognizes me.
https://github.com/JesusR25/Bacubirito-WebXR/blob/master/pagina/Prueba.html
from ar.js.
Does removing embedded
from the a-scene
work?
If not, then I have to admit I'm not sure, I maintain the location-based side of things and not so much the marker aspect. @kalwalt or @nicolocarpignoli may be able to help if they have time.
from ar.js.
Hi @nickw1 ,I tried to remove it but it still doesn't work.
from ar.js.
EDIT: Ah, sorry, just seem you are using a very old version of AR.js. That's unlikely to work now.
Look at the examples in the current repository to see the correct version to include, e.g
https://github.com/AR-js-org/AR.js/tree/master/aframe/examples/marker-based
from ar.js.
Hi. I found a temporary expedient. Try changing the camera's fov value. I changed the fov 80 to 45, then click position was fixed.
from ar.js.
Hi @viyamKUN, how do I do that?
from ar.js.
Related Issues (20)
- Image tracking AR.js with React stuck on loading screen , please help! HOT 2
- Help please! image tracking work but 3d model and video not showing
- change "Twitter" to "𝕏 (Twitter)" in README.md HOT 3
- The camera cannot be controlled by external parameters, especially on phones with multiple cameras,help me please!
- Why the camera fails to be used now?
- Seems like the version is Updated but not the docs and example
- Document is so misleading HOT 2
- Module Import fails in Nuxt3 --- ar-threex-location-only.js --- Cannot read properties of undefined (reading 'THREE') HOT 2
- 将ar.js引入three.js 请求一个功能
- Location based compass orientation is incorrect. It always says North is direction when starting up. HOT 3
- Location Base - Entity is following HOT 3
- Event fired when user "see" an object (location based) HOT 1
- "click" events are not emitted on Android when scene is loaded dynamically HOT 1
- Replacing a building?
- Need help implementing AR.js
- New-location-based entity position problem HOT 1
- Location Based AR.JS project mixed with AFRAME Hit Test
- Place to list device models / OS versions which cause the "content sticking to camera" problem (#278)
- Raycaster intersects invisible marker roots. Is there any landmark to distinguish between displayed and hidden elements? (marker-based)
- node_modules animation-mixer not working HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ar.js.