fcor / arjs-gestures Goto Github PK
View Code? Open in Web Editor NEWRotate and zoom with touch gestures on any Image tracking or Marker Based AR.js scene
License: MIT License
Rotate and zoom with touch gestures on any Image tracking or Marker Based AR.js scene
License: MIT License
Hi!
I want to use this demo in a modular form, but neither AR.js nor Aframe.js has a modular demo. How can i do it?
I have multiple cubes, and I'm wondering how to interact with them separately?
Hi, I have loaded the model without the marker. Here is my code:
<head>
<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/aframe/build/aframe-ar.js"></script>
<script src="gesture-detector.js"></script>
<script src="gesture-handler.js"></script>
</head>
<body>
<a-scene
arjs
embedded
renderer="logarithmicDepthBuffer: true;"
vr-mode-ui="enabled: false"
gesture-detector
id="scene"
>
<a-assets>
<a-asset-item
id="bowser"
src="https://cdn.glitch.com/06bd98b4-97ee-4c07-a546-fe39ca205034%2Fbowser.glb"
>
</a-asset-item>
</a-assets>
<a-entity
id="bowser-model"
gltf-model="#bowser"
position="0 0 0"
scale="0.05 0.05 0.05"
class="clickable"
gesture-handler
></a-entity>
<a-entity position="0 0 3.8" camera></a-entity>
</a-scene>
</body>
But I can't manipulate with model by this way. Could you help me? Thanks!
Nice work! How to change the marker?Thank you!
Hello, I tried it with another photo and found no effect. I want to know if this program has any special requirements for photos, and how can I replace photos
Not really an issue just a question! This is super cool and I am excited to have come across it, it works really well. Thank you!
I did try applying it to a location-based object (i.e. no marker) and it doesn't work with that. I know you've not suggested that it should, but I wondered if there's any way to make it work with location-based or would that be impossible?
I am now able to scale and rotate, thank you very much. How can I move objects using a single finger, like drag and drop?
I am using ar.js with gestures.js to make a sneakers showroom. I preloaded my models and loaded them all to my scene when marker is found but one model is show, others are loaded with the scale of "0 0 0"... Added event listener (click) to switch between the models. Everytime the model is tapped, the scale for current model is set to "0 0 0" while the scale for the next model is set to "2 2 2". The problem I have is following: Every time I try to zoom in to the model using gestures, first model is zoomed, not the current "active" model. Funny thing is, I do not have the same problem for rotation. Moving my finger rotates the "active" model. The reason I loaded all the models at the same time is to reduce the time needed between model switching. If I get this correctly, my problem is that zooming scales all of the models at the same time but only first one is shown, or am I wrong? Likewise it rotates all the models at the same time but because their scale is set to "0 0 0" their rotation is not visible. Any tips please
Hi, @fcor, great project!
I would like to change marker, so where can I generate marker?
Is there a way to disable the vertical rotation and only allow horizontal rotation of the models?
hi I've tried to transfer every single file over to my own repository but my 3d entity is not responding to any gestures. why is this the case?
the second demo works fine in mobile phone like my iPhone Safari.
but it can't detect two-finger-move in PC like MacOS Chrome for your second demo.
for 8thwall demo : https://8thwall.8thwall.app/manipulate-aframe/ (it works fine)
Really really needs your help!!
hello, when i open the example some text says : "Webcam error Name: NoReadableError Message: Could not start video source".
Hi,
Thanks for the great work - I'm using the gesture-handler / gesture-detector and it is working well.
I recently added the animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"
to a-entity
to have the models rotate automatically.
When this happens you can still pinch to zoom but can no longer use one finger to rotate the object
Do you know how to disable the rotation animation on touch?
Thanks in advance!
When the scanned marker shows the model,I want to keep the model on the screen and not move with the marker.
How can i do it?
Hi,
I was wondering if we can do customise scaling of the height and width for the 3d model indivdually, i have tried adding threefingermove and fourfingermove for customising the width and height respectively. However, it seems like not working due to the scaling calculation for the change of model size.
This is the part for the init:
init: function () {
this.customScaleHorizontal = this.customScaleHorizontal.bind(this);
this.customScaleVertical = this.customScaleVertical.bind(this);
this.handleScale = this.handleScale.bind(this);
this.handleRotation = this.handleRotation.bind(this);
this.initialScale = this.el.object3D.scale.clone();
this.scaleFactor = 1;
},
This is the part for updating the eventlistener:
update: function () {
if (this.data.enabled) {
this.el.sceneEl.addEventListener("onefingermove", this.handleRotation);
this.el.sceneEl.addEventListener("twofingermove", this.handleScale);
this.el.sceneEl.addEventListener("threefingermove", this.customScaleHorizontal);
this.el.sceneEl.addEventListener("fourfingermove",this.customScaleVertical);
} else {
this.el.sceneEl.removeEventListener("onefingermove", this.handleRotation);
this.el.sceneEl.removeEventListener("twofingermove", this.handleScale);
this.el.sceneEl.removeEventListener("threefingermove", this.customScaleHorizontal);
this.el.sceneEl.removeEventListener("fourfingermove", this.customScaleVertical);
}
},
This is the part for removing the eventlistener:
remove: function () {
this.el.sceneEl.removeEventListener("onefingermove", this.handleRotation);
this.el.sceneEl.removeEventListener("twofingermove", this.handleScale);
this.el.sceneEl.removeEventListener("threefingermove", this.customScaleHorizontal);
this.el.sceneEl.removeEventListener("fourfingermove", this.customScaleVertical);
},
This is the part for customizing the width:
customScaleHorizontal: function (event) {
this.scaleFactor *=
1 + event.detail.spreadChange / event.detail.startSpread;
this.scaleFactor = Math.min(
Math.max(this.scaleFactor, this.data.minScale),
this.data.maxScale
);
this.el.object3D.scale.x = this.scaleFactor * this.initialScale.x;
this.el.object3D.scale.y = this.el.object3D.scale.y;
this.el.object3D.scale.z = this.el.object3D.scale.z;
},
This is the part for customizing the height:
customScaleVertical: function (event) {
this.scaleFactor *=
1 + event.detail.spreadChange / event.detail.startSpread;
this.scaleFactor = Math.min(
Math.max(this.scaleFactor, this.data.minScale),
this.data.maxScale
);
this.el.object3D.scale.x = this.el.object3D.scale.x;
this.el.object3D.scale.y = this.scaleFactor * this.initialScale.y;
this.el.object3D.scale.z = this.el.object3D.scale.z;
},
And this is the only part i have changed for gesture-detector part:
getEventPrefix(touchCount) {
const numberNames = ["one", "two", "three", "four"];
return numberNames[Math.min(touchCount, 4) - 1];
}
I'm not sure whether is my logic wrong or what, please help me.
Thank you!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.