The problem:
I want to make a ball the user can throw. With my current implementation, physics work but I cannot lift the ball. However, if I delete the "dynamic-body" I can grab the ball exactly as I am supposed to, and move it around. Heck, I tried changing it to "static-body" and it still works. The problem seems to be whenever I mix grabbable and dynamic-body. I know it should be possible in an older version, as I was using this tutorial: https://www.youtube.com/watch?v=SKYfYd3pk4I
However, he is using progressive-controls which are not available in the newest super-hands package, I don't know if that changes anything. Is there anything I am doing wrong here?
Here are my snippits of code that could affect the result:
My A-Frame packages:
<head>
<!-- A-Frame -->
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<!-- A-Frame Components -->
<!-- A-Frame Particle System -->
<script src="https://unpkg.com/aframe-particle-system-component#1.0.9/dist/aframe-particle-system-component.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
<!-- A-Frame Event System -->
<script src="https://unpkg.com/aframe-event-set-component#4.2.1/dist/aframe-event-set-component.min.js"></script>
<!-- A-Frame Extras Add-Ons -->
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v6.1.1/dist/aframe-extras.min.js"></script>
<!-- A-Frame Physics -->
<script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system#v4.0.1/dist/aframe-physics-system.min.js"></script>
<!-- A-Frame Physics Extra Add-On -->
<script src="https://unpkg.com/aframe-physics-extras#0.1.2/dist/aframe-physics-extras.min.js"></script>
<!-- A-Frame Super Hands -->
<script src="https://unpkg.com/super-hands#3.0.0/dist/super-hands.min.js"></script>
</head>
My problematic sphere:
<!-- Ball -->
<a-entity
id="Ball-2"
position="0 0 0">
<a-sphere
id="Ball-2-collider"
grabbable
dynamic-body="mass: 0.2; linearDamping: 0.05; angularDamping: 0.3; shape: sphere;
sphereRadius: 0.125;"
class="interactable ball"
radius="5"
position="0 0.6 3.8"
scale="0.02 0.02 0.02">
<a-entity
id="ball-2-mesh"
position="0 -6 0"
rotation="0 0 0"
scale="600 600 600"
gltf-model="#Ball-glb"
color="#FFFFFF">
</a-entity>
</a-sphere>
</a-entity>
My controller-setup:
<a-entity id="camera-rig" position="0 -1.20 4" rotation="0 150 0">
<a-camera
user-height="1.6"
active="true">
<a-entity
cursor="fuse: true; fuseTimeout: 1000"
raycaster="objects: .interactable"
animation__fusing="property: scale; startEvents: fusing; easing: linear; dur: 1000; from: 1 1 1; to: 3 3 3"
animation__leave="property: scale; startEvents: mouseleave; easing: linear; dur: 1; from: 1 1 1; to: 1 1 1"
animation__click="property: scale; startEvents: click; easing: linear; dur: 150; from: 3 3 3; to: 1 1 1"
position="0 0 -1"
geometry="primitive: sphere; radius: 0.005"
material="color: #FF00FF; shader: flat; opacity: 0.5">
</a-entity>
</a-camera>
<a-entity sphere-collider="objects: .interactable" handModelStyle: lowPoly; super-hands hand-controls="hand: left"></a-entity>
<a-entity sphere-collider="objects: .interactable" handModelStyle: lowPoly; super-hands hand-controls="hand: right"></a-entity>
</a-entity>
And finally, the a-scene defining the gravity:
<a-scene embedded antialias="false" physics="gravity: -9.8; debug: true">
Thanks to this: https://github.com/bryik/aframe-ball-throw/blob/master/index.html
I found the culprit.
I needed to add the static-body to my hand-entities, so that collision could be detected. No idea why collision was detected without them before though.
Modified code:
<a-entity static-body="shape: sphere; sphereRadius: 0.02;" sphere-collider="objects: .interactable" handModelStyle: lowPoly; super-hands hand-controls="hand: left"></a-entity>
<a-entity static-body="shape: sphere; sphereRadius: 0.02;" sphere-collider="objects: .interactable" handModelStyle: lowPoly; super-hands hand-controls="hand: right"></a-entity>
Aframe version: 1.0.3
Platform: android
Browser: chrome and firefox
The cursor (a-cursor tag) on mobile has gone when I enter VR mode.
Is there a way how can I enable/add the cursor when its on VR mode? or
Why the cursor has gone when I enter the VR mode.
<a-assets style="display:none;visibility: hidden;opacity: 0;" ></a-assets>
<a-sky id="sky" radius="90" src="" rotation="-3.7000000000000006 192.27000000000004 -3.58" material="" geometry=""
animation__fadeIn="property: material.color; type:color; from:#ffffff; to:#000000; dur: 500; dir: normal; easing: easeInSine; startEvents:fadeIn"
animation__fadeOut="property: material.color; type:color; from:#000000; to:#ffffff; dur: 500; dir: normal; easing: easeInSine; startEvents:fadeOut"></a-sky>
<a-camera wasd-controls-enabled="false" mouse-cursor="" active="true" look-controls="" wasd-controls="" data-aframe-inspector-original-camera="" device-orientation-permission-ui="">
<a-cursor id="cursorBlack" fuse="true" fuse-timeout="2000" raycaster="objects: .clickable" geometry="radiusOuter: 0.04; radiusInner: 0.00001" material="color: black" position="0 0 -2" opacity="0.5" visible="" cursor=""></a-cursor>
<a-cursor id="mouseCursor" raycaster="objects: .clickable; useWorldCoordinates: true" cursor="rayOrigin: mouse"></a-cursor>
<a-entity id="cursorBlue" position="0 0 -2" geometry="primitive: ring; radiusInner: 0.09; radiusOuter: 0.1; thetaStart: 90" material="color: #439DC2" visible="false"
animation__loadCursor="property: geometry.thetaLength; from:360; to:1; dur: 2000; dir: normal; easing: easeInSine; startEvents:loadCursor">
</a-entity>
</a-camera>
<a-entity style="display:none; visibility: hidden;opacity: 0;" id = "sceneContainer" visible = "true"></a-entity>
</a-scene>
It's a known bug that has been fixed and will ship in the upcoming 1.0.4 version. You can use master builds meanwhile:
https://cdn.jsdelivr.net/gh/aframevr/aframe#2c5c131dccaab9d449fcd0383e98d027a5bc07f6/dist/aframe-master.min.js
I'm having an issue where I can't properly set the trigger event for an animation
I have a cursor
It should animate itself when it is pointed at a specific entity
The property-value pair of "startEvents: fusing" within the animation attribute doesn't work, as well as other variations like "fuse" and "fused"
My a-frame version is 0.9.2
<a-camera position="0 3 0"
wasd-controls
look-controls>
<!-- Cursor (NOTE: having issues with animation here)-->
<a-cursor fuse="true"
fuse-timeout="250"
position="0 0 -1"
geometry="primitive: ring;
radiusInner: 0.02;
radiusOuter: 0.03"
material="color: white;
shader: flat;
opacity: 0.5"
raycaster="objects: .clickable"
scale="1 1 1"
animation="startEvents: fusing;
property: scale;
from: 1 1 1;
to: 0.5 0.5 0.5;
dur: 500"
>
<a-circle radius="0.01"
color="white"
opacity="0.5"
material="shader:flat"></a-circle>
</a-cursor>
</a-camera>
<a-entity class="orb clickable"
id="orb0"
scale="1 1 1"
position="0 3 -6"> </a-entity>
The cursor needs to be a child object of a camera element, like this:
<a-camera>
<a-cursor animation="startEvents: fusing;...."></a-cursor>
</a-camera>
fusing should be working, also mouseleave will be helpful to change the cursor when you move it away from the object. Check it out in this fiddle.
I'm trying to create a web page that contains an A-Frame box that rotates 90 degrees when it's clicked. I've tried various things including using the aframe-event-set-component library. I can't quite seem to get it to work. I suspect I have a syntax problem but I cannot figure out my mistake.
Any help you can provide would be greatly appreciated.
The following is my code using the aframe-event-set-component.
Thanks in advance for your help.
Tim
<html>
<head>
<title>Cursor</title>
<meta name="description" content="Changing properties in response to cursor component events"></meta>
<meta property="og:image" content="https://raw.githubusercontent.com/ngokevin/kframe/master/components/event-set/examples/basic/preview.gif"></meta>
<script src="node_modules\aframe-event-set-component\examples\build.js">
</script>
</head>
<body>
<a-scene>
<a-entity geometry="primitive: box" material="color: #FCB241"
event-set__1="_event: click; material.color:red
attribute="rotation dur='5000' repeat='0' to='0 90 0'""
event-set__2="_event: mouseenter; material.color: #5A67A6"
event-set__3="_event: mouseleave; material.color: #FCB241"
position="-1 0 -2">
</a-entity>
<a-sky color="#D68D08"></a-sky>
<a-entity camera look-controls>
<a-entity cursor
geometry="primitive: ring; radiusInner: 0.01; radiusOuter:
0.016"
material="color: #EEE"
position="0 0 -1"></a-entity>
</a-entity>
</a-scene>
<!--githubcorner-->
<a href="https://github.com/ngokevin/kframe/tree/master/components/event-set/examples/basic/" class="github-corner">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill: #111; color: #EFEFEF; position: fixed; bottom: 0; border: 0; left: 0; transform: rotate(180deg); opacity: 0.8">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}#keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}#media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
</style>
<!--endgithubcorner-->
</body>
</html>
`
Timothy,
If You wanna just rotate it, add the rotation attribute to the event:
event-set__1="_event: click; material.color:#ff0000;rotation:0 90 0"
On the other hand, i presume you want to have an animation, so You will have to either:
use the <a-animation> component, or use kevin's ngo animation-component: https://github.com/ngokevin/kframe/tree/master/components/animation
You'd need to declare an animation to 0 90 0, make a startEvent, and make the click emit that event:
<a-entity geometry="primitive: box" material="color: #FCB241"
event-set__1="_event: click; material.color:#ff0000;"
event-set__2="_event: mouseenter; material.color: #0000ff"
event-set__3="_event: mouseleave; material.color: #FCB241"
position="-1 0 -2"
animation__rotate="property: rotation; dir: forward; dur: 1000;
easing: easeInSine; loop: false; to: 0 90 0;
startEvents:click">
</a-entity>
The following plunk shows how to make it rotate on click with the animation component:
https://plnkr.co/edit/k9Jc5qEG0ckEovquEZi4?p=preview
If You don't want the animation, just replace Your event-set__1 with mine.
PERSONALLY i'd rather register my own component # AFRAME.registerComponent (name, definition), because I like to handle events by on own.
I want to add gradient color to the sphere, currently I am setting the color:
<a-sphere position="1 1 0" color="#ef2d5e">
<a-animation attribute="rotation" to="0 360 0" dur="10000" easing="linear" repeat="indefinite">
</a-animation>
</a-sphere>
Demo
How do I add gradient to the sphere? Is there any way.
Try https://github.com/zcanter/aframe-gradient-sky
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/zcanter/aframe-gradient-sky/master/dist/gradientsky.min.js"></script>
<a-scene>
<!-- A Sphere -->
<a-entity geometry="primitive: sphere" material="shader: gradient; topColor: 255 100 100; bottomColor: 100 100 200; offset: 0.0001" position="0 0 -5"></a-entity>
</a-scene>