I'm having trouble finding the right way to set the angular velocity on an object in a-frame.
<script>
AFRAME.registerComponent("cuberotator", {
init: function () {
console.log("trying to rotate the cube...");
const theta = new THREE.Vector3(0, 20, 0);
console.log (theta);
this.el.setAttribute('angularVelocity', theta);
//where is angularVelocity attribute?
}
});
</script>
I've attached a CodePen example at https://codepen.io/mcanterel/pen/LroRYz
Thanks for any insights.
If You want to rotate the cube around a certain point, you'd have to rotate the points frame of reference.
<a-entity>
<a-box></a-box>
</a-entity>
You can move the cube as you wish, and by rotating the wrapper entity, the cube will rotate around its initial center.
Your component can set the rotation in the tick() function which is called each frame.
tick: function() {
let rot = this.el.getAttribute("rotation")
rot.y += this.velocity // increase it on click or whenever
this.el.setAttribute("rotation", rot)
}
Related
I am trying rotation for mesh in an aframe gltf model but its seems to be not working. Is it possible to rotate a mesh of gltf model added on runtime in the scene? I am getting mesh where pivot is set but unable to apply rotation to it.
Issue: I have a door model with two meshes. Left door and right door. I want to rotate door 180 degree when user clicks on door mesh. I got the click event on entire 3d object as of now and checking which mesh is clicked; checking its parent and trying to rotate the left door but not working. Any idea what am i missing.
so
object.parent
returns me parent object type which I am trying to rotate. Is it the right way?
Here is what I got so far.
const newElement = document.createElement('a-entity')
// The raycaster gives a location of the touch in the scene
const touchPoint = event.detail.intersection.point
newElement.setAttribute('position', touchPoint)
//const randomYRotation = Math.random() * 360
//newElement.setAttribute('rotation', '0 ' + randomYRotation + ' 0')
newElement.setAttribute('visible', 'false')
newElement.setAttribute('scale', '4 4 4')
newElement.setAttribute('gltf-model', '#animatedModel')
this.el.sceneEl.appendChild(newElement)
newElement.addEventListener('model-loaded', () => {
// Once the model is loaded, we are ready to show it popping in using an animation
newElement.setAttribute('visible', 'true')
newElement.setAttribute('id','model')
newElement.setAttribute('class','cantap')
newElement.setAttribute('hold-drag','')
newElement.setAttribute('two-finger-spin','')
newElement.setAttribute('pinch-scale','');
/* newElement.setAttribute('animation', {
property: 'scale',
to: '4 4 4',
easing: 'easeOutElastic',
dur: 800,
}) */
newElement.addEventListener('click', event => {
const animationList = ["Action", "Action.001"];
/* newElement.setAttribute('animation-mixer', {
clip: animationList[0],
loop: 'once',
})
newElement.addEventListener('animation-loop',function() {
newElement.setAttribute('animation-mixer', {
timeScale : 0
})
}); */
var object = event.detail.intersection.object;
document.getElementById("btn").innerHTML = object.parent;
/* object.setAttribute('animation', {
property: 'rotation',
to: '0 180 0',
loop: true,
dur: 6000,
dir: 'once'
});*/
object.parent.setAttribute('rotation', {x: 0, y: 180, z: 0});
/* object.traverse((node) =>{
console.log(node.name);
document.getElementById("btn").innerHTML = ;
}); */
console.log(this.el.getObject3D('mesh').name);
// name of object directly clicked
console.log(object.name);
// name of object's parent
console.log(object.parent.name);
// name of object and its children
});
})
The trick to doing anything to parts of a gltf model is to traverse the gltf and isolate the object inside that you want to manipulate.
You can do this by writing a component, attached to the gltf entity, that gets the underlying threejs object, and traverses all the objects within the gltf group, and then you can select an object by its name.
You do this inside of a "model-loaded" event listener, like this
el.addEventListener("model-loaded", e =>{
let tree3D = el.getObject3D('mesh');
if (!tree3D){return;}
console.log('tree3D', tree3D);
tree3D.traverse(function(node){
if (node.isMesh){
console.log(node);
self.tree = node;
}
});
This selects one of the models, assigns it to a variable, which can be later used, to rotate the model (or do whatever you like with it).
tick: function(){
if(this.tree){
this.tree.rotateY(0.01);
}
}
here is the glitch
I was trying to use tick function as described in the below link https://github.com/aframevr/aframe/blob/master/docs/introduction/best-practices.md but it didnt worked out
AFRAME.registerComponent('foo', {
tick: function () {
var el = this.el;
var rotationTmp = this.rotationTmp = this.rotationTmp || {x: 0, y: 0, z: 0};
var rotation = el.getAttribute('rotation');
rotationTmp.x = rotation.x + 0.1;
rotationTmp.y = rotation.y;
rotationTmp.z = rotation.z;
el.setAttribute('rotation', rotationTmp);
}
});
Expected output the object should rotate around x actual result nothing happens..
I hope it's okay if i clarify a bit Kevin's answer.
But first of all, the code is working. Both in aframe 0.9.2 and 0.8.2.
The issue may be related to
the script being placed after the scene is loaded
the component not being attached to the entity:
js:
AFRAME.registerComponent('foo', {
// component body
})
html:
<a-entity foo></a-entity>
As for Kevins answer - it may be a good idea to make changes in the tick function with referring to the underlying THREE.js object.
If you want to rotate a box, there's no need to throw in all that logic you have:
1) create a tmp variable
2) get the object rotation
3) set the tmp variable
4) set the object rotation
When you have a function which executes on each render loop (tick) then you want to minimize what's happening there. So Kevin directly accesses the THREE.js object, and changes the rotation:
tick: function() {
el.object3D.rotation.x += 0.1 * Math.PI / 180 // three uses radians
}
Check it out in this fiddle.
You can just do el.object3D.rotation.x += 0.1
I've come through the official docs but wasn't able to locate information about how possibility of zooming in/out panorama images, is it supported in the A-Frame or maybe there is a workaround to read about implementing some of three.js on top of it?
This might be a cleaner way in 2018.
I limited the zoom of the Aframe camera 1-5 so it doesn't get too messy.I just tested this and its working greatly.Hope it helps others.
window.addEventListener("mousewheel", event => {
const delta = Math.sign(event.wheelDelta);
//getting the mouse wheel change (120 or -120 and normalizing it to 1 or -1)
var mycam=document.getElementById('cam').getAttribute('camera');
var finalZoom=document.getElementById('cam').getAttribute('camera').zoom+delta;
//limiting the zoom so it doesnt zoom too much in or out
if(finalZoom<1)
finalZoom=1;
if(finalZoom>5)
finalZoom=5;
mycam.zoom=finalZoom;
//setting the camera element
document.getElementById('cam').setAttribute('camera',mycam);
});
You could either:
Scale an <a-sphere> up or down when detecting the mouse wheel event
zoom in or out the camera, like documented here
This article might be helpful, as it covers using the mousewheel event on multiple browsers.
I think scaling may screw up Your setup, or be a resource waste, so I'd go with 2.
Sandy's answer helped me. I want to contribute an answer which shows the full code and enables smoother zooming (increments of 0.1):
<script>
window.addEventListener("wheel", (event) => {
// small increments for smoother zooming
const delta = event.wheelDelta / 120 / 10;
var mycam = document.getElementById("cam").getAttribute("camera");
var finalZoom =
document.getElementById("cam").getAttribute("camera").zoom + delta;
// limiting the zoom
if (finalZoom < 0.5) finalZoom = 0.5;
if (finalZoom > 2) finalZoom = 2;
mycam.zoom = finalZoom;
document.getElementById("cam").setAttribute("camera", mycam);
});
</script>
<a-scene>
<a-entity
id="cam"
camera="zoom: 1"
look-controls="reverseMouseDrag: true"
></a-entity>
<!-- my pano image stuff -->
<a-assets>
<img id="skyTexture" crossorigin="anonymous" />
</a-assets>
<a-sky src="#skyTexture"></a-sky>
</a-scene>
This is what I put together to do it. Check the initial vrZoom variable.
For me, what I struggled the most, was to understand the way you set a parameter that's inside a component. You have to call it like this: element.setAttribute('componentName', 'parameterName', 'value') and in my case cam.setAttribute('camera', 'zoom', vrZoom)
Here's my script all together. It would be possible to create a component with this, such as look-controls.
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
if (document.attachEvent)
document.attachEvent("on"+mousewheelevt, function(e){scroller(e)});
else if (document.addEventListener)
document.addEventListener(mousewheelevt, function(e){scroller(e)},false);
var vrZoom = 4; // My initial zoom after animation
var cam = document.querySelector('#mainCam');
function scroller(evt)
{
//Guess the delta.
var delta = 0;
if (!evt) evt = window.event;
if (evt.wheelDelta) {
delta = evt.wheelDelta/120;
} else if (evt.detail) {
delta = -evt.detail/3;
}
if (evt.preventDefault) evt.preventDefault();
evt.returnValue = false;
//Actual Zooming.
vrZoom += delta * 0.1
vrZoom = Math.min(Math.max(vrZoom, 1), 8); // clamp between 1 and 8
cam.setAttribute('camera', 'zoom', vrZoom)
}
I struggled quite a bit with getting this to work for an embedded a-frame, especially because the scene would become skewed upon dynamically adjusting the camera's zoom setting. This is a bug with a-frame. Here are the two ways I found to reset the scene upon setting the zoom level.
AFRAME.scenes[0].resize();
Or ...
let scene = document.querySelector('a-scene');
scene.camera.aspect = scene.clientWidth / scene.clientHeight;
scene.camera.updateProjectionMatrix();
I there a (css?) possibility to rotate an element on element:hover and keep the new position when moving the mouse out?
It seems that the element rotates back to it`s default position when the cursor leaves the :hover - area.
edit:
now it seems to work (forgot to say, that i wanted it to happen each time/ multiple times):
var rotate = 360;
$('.artistbutton360').bind({
mouseenter: function() {
$(this).css("-webkit-transform","rotate("+ rotate +"deg)");
$(this).css("-moz-transform","rotate("+ rotate +"deg)");
$(this).css("-o-transform","rotate("+ rotate +"deg)");
$(this).css("transform","rotate("+ rotate +"deg)");
rotate = rotate + 360;
}
});
You can use jquery:
$('element').hover(function(){
$(this).css(whatever);
});
remember adding
$(document).ready(function(){
});
I have an sphere with divs using CSS3DRenderer. When I click to one of the divs I'd like to position/rotate the camera so the element displays in the center of the screen.
I've tried several examples and I've read other answers but still I cant get it to work.
At the moment it moves the camera but the sphere gets repositioned in different places
What I'm trying to do is the following:
Gets the HTML element's class. Then loop through an array of THREE.CSS3DObject to get its position, then use that to position the camera.
function moveCamera(element) {
for ( var i = 0; i < objects.length; i ++ ) {
var object = objects[ i ];
if(object.element.className == element.className) {
position = object.position;
rotation = object.rotation;
found = true;
break;
}
}
if (found) {
camera.rotation = rotation;
render();
found = false;
} }
What I'm I doing wrong?
Here's the example http://jsfiddle.net/37R22/1/
Thanks
You were close. You just have to move the camera to the right place.
camera.rotation.copy( rotation );
camera.position.copy( position ).multiplyScalar( 4 );
Updated fiddles: http://jsfiddle.net/37R22/2/ or http://jsfiddle.net/37R22/3/
Be careful about going behind-the-back of TrackballControls and modifying the camera properties yourself. This appears to work, however.
three.js r.65