Entities are not affected by physics when they contain text attributes or child text entities
radicalappdev opened this issue · comments
The physics system does not work on entities that contain text. The text can be defined as an attribute of the entity or in a child entity. As far as I can tell, if A-Frame text is involved in an entity at all, the object cannot be affected by the physics system.
Here is a simple scene where I can grab some cubes to pick them up and move them. I'm using the grab component in aframe-extras but this issue shows up with superhands as well, leading me to think the issue is in the physics system.
In the following scene, I can grab and pick up the yellow and orange cubes. The red cube is defined the same way, but it has a child text node. This cube is not grabbable. It also can't be pushed by the yellow or orange cubes (or any other physics items). You can comment out the line with the text inside of the red cube and it will respond to physics <a-text position="-0.5 0.7 0" value="Hello, World!"></a-text>
Here is the full scene
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>WebXR Sandbox</title>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/super-hands@^3.0.1/dist/super-hands.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@5.0.0/dist/aframe-event-set-component.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.min.js">
</script>
<script src="https://unpkg.com/aframe-physics-extras/dist/aframe-physics-extras.min.js"></script>
<script src="https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"></script>
</head>
<body>
<header>
<h1 class="page-title">WebXR Sandbox: Super Hands demo with physics</h1>
</header>
<main>
<a-scene physics="gravity: 0;">
<a-assets timeout="80000">
<a-mixin id="hand" static-body="shape: sphere; sphereRadius: 0.02;" sphere-collider="objects: .cube;"
collision-filter="collisionForces: false;" grab>
</a-mixin>
</a-assets>
<a-entity id="rig">
<a-camera id="camera"></a-camera>
<a-entity mixin="hand" hand-controls="hand: left; handModelStyle: lowPoly; color: #ffcccc"></a-entity>
<a-entity mixin="hand" hand-controls="hand: right; handModelStyle: lowPoly; color: #ffcccc"></a-entity>
</a-entity>
<a-box class="cube" dynamic-body color="red" position="0.5 1 -1" scale=".3 .3 .3">
<a-text position="-0.5 0.7 0" value="Hello, World!"></a-text>
</a-box>
<!-- This doesn't work either -->
<!-- <a-box class="cube" dynamic-body color="red" position="0.5 1 -1" scale=".3 .3 .3"
text="value: Hellp, World!">
</a-box> -->
<a-box class="cube" dynamic-body color="orange" position="0 1 -1" scale=".3 .3 .3"></a-box>
<a-box class="cube" dynamic-body color="yellow" position="-1 1 -1" scale=".3 .3 .3"></a-box>
<a-box grabbable stretchable static-body color="gray" position="0 -0.5 -1" width="10" depth="10"></a-box>
</a-scene>
</main>
</body>
</html>
Have you tried specifying the shape for your dynamic-body on the cube with text? The text component does some complex webgl stuff that may the throwing off the automatic body shape construction
@wmurphyrd I had not tried that. I just did and it certainly fixes the issue for me. Interestingly the box shape didn't work but when I added a sphere shape and made it just a bit bigger than the object it worked great. I might just be misunderstanding how to use the box shape in the dynamic-body, as I can't find a way to increase it's size like I can with the sphere or cylinders.
This failed
<a-entity dynamic-body="shape: box;" position="-0.5 1 -1" scale=".3 .3 .3" material="color: yellow;"
geometry="primitive:box" material="color: white" grabbable sleepy>
<a-text position="-0.5 0.7 0" value="Hello, World!"></a-text>
</a-entity>This worked
<a-entity dynamic-body="shape: sphere; sphereRadius: 0.25;" position="-0.5 1 -1" scale=".3 .3 .3"
material="color: yellow;" geometry="primitive:box" material="color: white" grabbable sleepy>
<a-text position="-0.5 0.7 0" value="Hello, World!"></a-text>
</a-entity>Thanks for the reply :-)
Eventually I figured out a workaround to this issue. By setting the shape: none; in the body component, I can then use the shape component to manually create the collider for the object.
Components
body="type: dynamic; mass: 5; shape: none;"
shape="shape: box; halfExtents: 2.3 1.5 0.1;"Full entity with child text entities
<a-box
depth="0.1"
height="3"
width="4.6"
grabbable
stretchable
sleepy
body="type: dynamic; mass: 5; shape: none;"
shape="shape: box; halfExtents: 2.3 1.5 0.1;"
position="0 1.5 -1"
scale="0.1 0.1 0.1"
material="color: #1e20ff; emissive: #1e20ff; emissiveIntensity: 0.8; "
>
<a-entity
material="color: #1e20ff; emissive: #1e20ff; emissiveIntensity: 0.8; "
geometry="primitive: plane; width: 4; height: auto"
position="0 1.1 0.1"
text="value: Title text for the card name; align: left; color: #B6B4B8; width: 4;"
>
</a-entity>
<a-entity
material="color: #1e20ff; emissive: #1e20ff; emissiveIntensity: 0.8; "
geometry="primitive: plane; width: 4; height: auto"
text="value: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.; baseline: top; align: left; color: #B6B4B8; width: 4;"
position="0 0.8 0.1"
>
</a-entity>
</a-box>Can I suggest a change to the documentation? Perhaps a short note to indicate that the automatic creation of colliders may not work when using text components or a-text entities. Something like the following
A note about A-Frame Text & Colliders
When using the A-Frame text component or the a-text primitive entity, the automatic creation of colliders may fail. In these situations you can disable the automatic colliders by setting the shape: none; in the body component, then manually specifying the shape component. For example
<a-box color="blue" depth="0.1" height="3" width="4.6" body="type: dynamic; mass: 5; shape: none;"
shape="shape: box; halfExtents: 2.3 1.5 0.1;" position="0 1.5 -1" scale="0.1 0.1 0.1">
<a-entity geometry="primitive: plane; width: 4; height: auto" position="0 1.1 0.1"
text="value: Title text for the card name; align: left; color: #000; width: 4;">
</a-entity>
</a-box>