1 year ago
#359286
Amehin Ansary
A-Frame How to rotate and zoom in and zoom out using obj/mtl file inside scene
i 've been searching for a while to do 3 particular things .. 1- do rotation around the obj smoothly and what is the best practice for dis 2- zoom in and zoom out on the obj/mtl loaded inside the a-scene 3- how to display the obj/mtl file only when it detects a floor or surface or anything but not camera!
what i've tried? 1- all links and problems here on StackOverFlow and A-frame documentation as well 2- this zoom 3- this wheel
what i want to achieve .. 1- zoom in out on web and mobile by clicking or touching 2- do the right way to rotate an object this is my code `
<script>
AFRAME.registerComponent('rotation-reader', {
tick: (function () {
var position = new THREE.Vector3();
var quaternion = new THREE.Quaternion();
return function () {
this.el.object3D.getWorldPosition(position);
this.el.object3D.getWorldQuaternion(quaternion);
};
})()
});
<script>
AFRAME.registerComponent('zoom-controls', {
schema: {
min: {
type: "number",
default: 5
},
max: {
type: "number",
default: 120
}
},
init: function () {
let self = this;
let sceneEl = document.querySelector("a-scene");
self.camera = sceneEl.querySelector("#camera");
console.log('min: ', self.data.min);
console.log('max: ', self.data.max);
window.addEventListener("click", event => {
let amount = Math.sign(event.deltaY) * 5;
let fov = Number(self.camera.getAttribute('camera').fov);
let adjust = amount + fov;
if (adjust < self.data.min) {
adjust = self.data.min;
}
if (adjust > self.data.max) {
adjust = self.data.max;
}
console.log('zoom: ', adjust);
self.camera.setAttribute('camera', 'fov', adjust);
});
}
});
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<!-- obj file -->
<a-assets>
<a-asset-item id="obj-Model" src="models/printing-press.obj"></a-asset-item>
<a-asset-item id="obj-mtl" src="models/printing-press.mtl"></a-asset-item>
</a-assets>
<!-- <a-animation attribute='scale' dur='500' direction='alternate' from='1 1 1' to='3 3 3' begin='click' repeat='1'>
</a-animation> -->
<a-entity id="camera" wasd-controls rotation-reader camera
look-controls="pointerLockEnabled: true;"
obj-model="obj: #obj-Model; mtl: #obj-mtl" zoom-
controls="min:5; max:140" fov="100" position="0 0 0"
scale="0.01 0.01 0.01" rotation="0 0 0"
animation="property:
camera.zoom; dur=500; direction=alternate; from=1; to=2;
begin=click; repeat=1;
easing:easeInOutQuad; loop: true; dir: alternate;">
</a-entity>
<a-entity id="rig" position="0 0 11">
<a-camera id="camera" look-controls="enabled:false"></a-camera>
</a-entity>
</a-scene>
</body>
`
zooming
aframe
virtual-reality
webvr
0 Answers
Your Answer