Aframe seems to have changed the way it handles mouse events without changing the documentation. Can you help me trigger mouseenter and mouseleave events?
My code is here, running in the glitch framework:
https://glitch.com/edit/#!/aframe-cursor-stuff?path=index.html:1:0
(Click "show live" (top left) to run it in a new tab, click "remix to edit" (top right) to make changes to the code)
THE SCENE
A circular cursor appears, with a box. If you click and drag the screen you can move the cursor over the box. If you then click, the box will animate in a y axis spin
But just moving the cursor over the box should scale the box up - and moving the cursor away from the box should scale the box back down - using "mouseenter" and "mouseleave"
This, in fact, works if you substitute the Aframe src to an earlier version (0.2.0) which I have commented out in my code - if you want to try it.
The documentation for the current release (0.8.0) still seems to support mouseenter events:
https://aframe.io/docs/0.8.0/components/cursor.html
and specifies:
"mouseenter: Emitted on both cursor and intersected entity (if any) when cursor intersects with an entity"
For the record, Aframe version 0.8.2 reacts like 0.8.0
Can you tell me what's what?
<a-event> is deprecated since 0.4.0. Use the event-set-component:
<a-box color="#0000FF"
width="1" height="1" depth="1"
position="0 0 -5"
rotation="45 45 45"
scale="1 1 1"
event-set__mouseenter="scale: 2 2 2"
event-set__mouseleave="scale: 1 1 1">
<a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
</a-box>
Demo: https://glitch.com/edit/#!/rainy-camera-1?path=index.html:14:7
Related
```
<a-entity class="rota" id="duck1" color="#fdfd96" scale="0.1 0.1 .1" position="2 0 -7" animation="property: rotation; to:0 -360 0; loop:true; easing:linear; dur:30000">
<a-entity class="rota" color="#F0FFF0" gltf-model="spaceship.glb" animation__mouseenter="property: rotation; to:0 360 0; easing:linear; dur:4000; startEvents: mouseenter" position="0 0 1" scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-entity>
</a-entity>
```
In the first animation it makes the object take the whole revolution in a loop, completing it at specific interval. Whereas, I am using same animation(animation_mouseenter) setting inside then it just rotates along y-axis at a fix point given by previously animation. I want animation_mouseenter to work in a manner same as previous one but comparitively faster then previous animation.
In there is another issue as well. Now it just respond to first mouseenter call but not later. I know this is because I have not used from in animation_mouseenter. But I don't want animation to start from one particular location, rather I want it to occur whenever there's a mouse over the entity.
The outer entity is a parent of the inner entity.
The inner entity's position is set relative to the parent (outer) entity.
When you rotate the outer entity, you will see the inner entity moving round in a cicle, around a pivot point that is the position of the outer entity.
When you rotate the inner entity, you are just rotating the inner entity, so it will just spin on its own axis.
An analogy: imagine a cookie on the edge of a plate. The outer animation is likely spinning the plate: the cookie moves around. The inner animation is like spinning the cookie: it stays still and just spins.
For the effect you want, I think you need to move the inner animation onto the outer entity (spin the plate, not the cookie).
You can still trigger it with the mouseover event because the mouseover event will bubble up from child to parent. Alternatively, you could use a small component to relay events from one object to another (here's an existing component that could help you to do that https://github.com/diarmidmackenzie/key-bindings).
I followed the docs exactly as described (refer
https://aframe.io/docs/master/components/scale.html)
in a super basic WebVR scene on Glitch and it seems the code related to reflecting a sphere along the Z-axis won't work. It seems to be fairly straightforward, so I can't imagine why there should be any trouble. Am I doing something stupid or is it really not working? I know I could use a-sky but I want more control over position, rotation, etc (it needs to be an element in the world).
A-Frame Version: 1.0.4
Platform / Device: Windows ASUS Rog Zephyrus Laptop, Desktop browser (tested on Firefox and Edge)
Reproducible Code Snippet or URL: https://east-stock.glitch.me/. Ideally, you shouldn't be able to see the sphere from "outside" it, as in this scene, and the red should appear once you navigate "inside" the sphere.
Just so you have it, this is what I put in my scene:
<a-entity
geometry="primitive: sphere; radius: 4"
material="color: red"
scale="1 1 -1"
position="0 0 -5"
></a-entity>
You need to add some properties to the material of the sphere to get it to work.
<a-entity
geometry="primitive: sphere; radius: 4"
material="color: red; side: back; shader: flat; "
scale="1 1 1"
position="0 0 -5"
></a-entity>
You only want to show the 'back' of the faces of the sphere, that's what the side:back does. You probably don't want the sphere to reflect the light, therefore in this case I would add the shader:flat parameter so it is rendered flat.
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>
Is it possible to get xyz position (probably not Z because it is forward and backward) when mouse click on a-scene?
for example:
<a-image id="image1" click-drag src="image/info.png" position="1 0.75 1" rotation="0 0 0"></a-image>
What i am trying to achieve is, when I click on the scene, i want put object in the scene, but I need to find out what is the exact position.
Please advise.
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">