I would like to programmatically rotate the camera in the A-FRAME scene in a similar way that you can click and drag the mouse to rotate the camera around the scene. Is this possible to do?
A more detailed description of the problem will help you get a more precise answer. A-Frame already lets you click and drag the mouse to move the camera via the look-controls component . There's also a component called orbit controls that rotates the camera around a target point. If you want to implement your own, create a and apply a component to the camera that manipulates its rotation on the tick method
tick: function () {
this.el.object3D.rotation.set(...);
}
You apply your component in the HTML as follows:
<a-entity camera your-component></a-entity>
In case when look-controls component is used, it will override the rotation of the camera element, so one has to set internal attributes of the look-controls component.
Overriding mouse control rotation value in that component can be done like this:
aCamEl.components['look-controls'].pitchObject.rotation.set(THREE.Math.degToRad(pitch),0,0);
aCamEl.components['look-controls'].yawObject.rotation.set(0,THREE.Math.degToRad(yaw),0);
Related
For exame, the enable vr mide button in the lower right hand corner. I need the buttons and text to appear and stay fixed to the screen when an event is triggered. Similar to how a canvas and button works in unity.
Parent the buttons to the camera. Then they will stay locked to the camera.
Move the buttons using the position component, and they will move in their local coordinate space.
Parent/child relationships are created by nesting the entities, like this.
<a-scene>
<a-box>
<a-sphere></a-sphere>
<a-light></a-light>
</a-box>
</a-scene>
I am using the click-drag component (https://github.com/jesstelford/aframe-click-drag-component) to drag entity's across the screen, and this is done by the mouse (not the cursor that is fixed in the middle of the screen). My question is how can I emit an event by clicking on the entity with the mouse and not with the cursor. (I am trying to clone the enity i click on and moving that one.)
A-Frame's cursor component has a mouse mode.
<a-entity cursor="rayOrigin: mouse">
How do I figure out when a texture is applied to an entity?
<a-entity material="src: url(mytexture.png)"></a-entity>
There is the material-texture-loaded event (https://aframe.io/docs/0.2.0/components/material.html), but that seems to only be fired once the texture has fully arrived to the browser (rather than actually being applied).
The materialtextureloaded event is applied immediately after we set material.map and material.needsUpdate using three.js.
What we found was happening was that the texture image width/height did not have power-of-two resolutions (e.g., 64x64, 512x512, 128x1024). This is especially important for large textures like equirectangular photos used in a-sky.
Because of that, it took some time for three.js to resize the texture during runtime. Once we resized the texture, the event was firing closer to the time the texture displayed on screen.
myEntityEl.addEventListener('materialtextureloaded', function () {
setTimeout(function () { // setTimeout for good measure.
console.log('material now showing on screen');
}, 200);
});
I'm stuck on how to approach this. I have a QGraphicsItem within a scene, and I'm passing a hover event from the scene to this child. While the move event occurs (I'm just using mouseMoveEvent with mouse tracking on), I want another QGraphicsItem to follow the cursor.
I don't need any collision detection, drag and drop, etc. Just an item that follows the cursor. The only two ways I can think of are...
While the mouse moves, draw a new QGraphicsItem at the mouse position. I would need to clear the scene, redraw everything, and draw the new position on top.
Somehow use the animation framework and whenever the mouse moves, animate the QGraphicsItem to move to the new mouse position in 1 millisecond.
I'm probably either overthinking this or unaware of another way to do this... any suggestions?
I did it like this
Create the GraphicsItem cursor which will be moved with mouse-cursor, and store its pointer somewhere (in scene subclass for instance. I have a toolset, so for me it's in one of these tools)
Set its Z-Value (QGraphicsItem::setZValue) so that the cursor will be painted above all other items in your scene
Track QGraphicsScene::mouseMoveEvent events, forward these events down to the cursor pointer, and update item's position
that's it.
I guess it corresponds to your solution 1, except you don't have to clear the scene thanks to z-value feature.
In Flex/Actionscript
When writing an on mouseMove event on a Canvas control for example, how could I check to see what control if any is under the mouse pointer at a particular coordinate?
You can call getObjectsUnderPoint on your Canvas to determine what children of that canvas are under the current mouse point. You have to make sure the point you pass in is in stage coordinates. Hope that helps.