n5ro / aframe-physics-system Goto Github PK

demo to reproduce issue

this stackoverflow answer In a port from Three.js 68 to 69: Cannot read property 'boundingSphere' of undefined looks related

See #26; this needs to continue to work after the bodies themselves are serialized.

Using the static-body component does not work on .obj files. The debug mode shows no wireframe around the object. It works perfectly on simple geometries though.

I am using the component like this:

<a-entity obj-model="obj: url(./img/mini-house.obj)" static-body="shape:box" mtl="color:blue; side:double"></a-entity>

While I was playing around with Kevin's text-geometry component I noticed that adding the physics component from HTML on the page or from the inspector on an entity that already had text-geometry, it loads physics, but doing it programmatically, like say:

var newText = document.createElement('a-entity')
newText.setAttribute('text-geometry', 'value', "foo")
newText.setAttribute('dynamic-body', 'shape', 'box')
this.el.sceneEl.appendChild(newText)

the physics never loads -- the best indication I have is that no debug wireframe appears and the elements don't seem to get pushed in the sim tree in the physics system. Per my @donmccurdy's discussion in the Slack, probably need to listen for different type of attaching geometry?

Glitch for example ("dog?" falls because it's initialized at page load, but the text generated when you click doesn't get simulated behavior event though it has a valid dynamic-body attribute)

the example doesn't seem to work in latest webVR chrome Version 56.0.2902.0 (64-bit)

i briefly see dynamic bodies before sim starts then they just disappear and all of the positions and rotations end up as NaN

things work as expected in firefox nightly and it works in release chrome without VR Version 55.0.2883.87 m (64-bit)

perhaps related to bad time values in this release of webVR chrome aframevr/aframe#2207

I've noticed an issue where objects are falling through a simple Collada based floor/plane.

Here is the jsfiddle example:
https://jsfiddle.net/9z9e1jtk/

Do you have some clue how can i apply forces to reproduce this effect of bigger attraction when an object is far from origin position and slow down when arriving at origin?

https://youtu.be/RLEEVGxu_k8?t=3m16s

And if physics is the best approach to this (as it can collide things on the path) or may be handled with animation?

Thanks in advance

The example does not work in in A-Frame 0.5.0 - both current Firefox and Chrome (Mac) throw TypeError.

Chrome:

Uncaught TypeError: Cannot read property 'position' of undefined
    at i.<anonymous> ((index):51)

Firefox:

TypeError: box.body is undefined[Learn More] examples:51:1

Possible syntax:

<a-scene physics="debug: true" contact-material="friction: 0.1" solver="iterations: 20">
  <a-entity physics-material="name: coarse-mat-1; friction: 0.5"></a-entity>
  <!-- ... -->
</a-scene>

What this doesn't support (and maybe should be programmatic anyway) is defining additional contact materials.

• force="1 0 0"
• proximity-force="maxDistance: 2;" (allow things to hover, or push away from others?)
• rotation-constraint="y" (limit rotation to y axis)
• position-constraint="x, z" (limit movement to x and z axes)

from desktop now you sort of need to use kinematic-body to test physics much; would be much nicer to have something that works with desktop and daydream (and ofc roomscale) without depending on kinematic-body.

The physics is a system. Which unfortunately does not fire update when it is changed.

https://aframe.io/docs/0.5.0/core/systems.html

It would be great if it was a component instead so that it could be updated dynamically.

☹️

Hi,

I have two objects that I constrain to each other with a lock constraint, but they constantly collide and spin out of control once connected, even if collideConnected is set to false on both.

Am I using constrains incorrectly?

Hi, I'm trying to listen for the collide event,
simply by entityWithADynamicBody.addEventListener('collide',(e)=>{});

It seems to be correct, moreover it works on earlier versions (1.4.1 at least), as presented in my fiddle.

But when i link the newest version ([2.0.0](<script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v2.0.0/dist/aframe-physics-system.min.js"></script>)), it doesn't fire at all, as presented in my fiddle.

Am I missing something here ?
a-frame version: 0.6.1.

Hello,
I'm trying to use a basic lock constraint between two objects, where object "blue" references object "red" as follows:
<a-entity class="model" id="red" mixin="cube" material="color: red" position="0 1 -1" collision-filter="group: red; collidesWith: default, red"></a-entity>
<a-entity class="model" id="blue" mixin="cube" material="color: blue" position="0 1.6 -1" collision-filter="group: red; collidesWith: default, red" constraint="target: #red"></a-entity>
The basic function of this constraint work all right; when I pick up and move the red cube, the blue one follows. However, if my controller's collider even slightly touches the blue box, this error is thrown and the program crashes.

I hope you could take a look at this.
Thanks!

Edit: Also, placing a collada model as the target of a constraint doesn't seem to work. My two entities are defined as:
<a-entity id="hulldae" class="model" collada-model="#hulldae" position="1 1 1" collision-filter="group: red; collidesWith: default, red" stuck dynamic-body="shape: box; linearDamping: 0.99; angularDamping: 0.99"></a-entity>
<a-entity id="mol" class="model" obj-model="obj: #model1; mtl: #mat1" position= "-0.5 1 1" collision-filter="group: red; collidesWith: default, red" dynamic-body="shape: box; linearDamping: 0.99; angularDamping: 0.99" constraint="target: #hulldae"></a-entity>
However, if I place the constraint="target: #hulldae" on the #mol, there is no constraint action, whereas if I place constraint="target: #mol on the #hulldae, they move together as expected.

Links to the models:
hulldae: https://skfb.ly/68AsK
mol: https://skfb.ly/6rYOZ

The error remains if I turn both into collada objects; it only seems to lock correctly for .obj ones. I do want to use collada objects though, as .obj collisions aren't as good.

Thanks! :)

Hi,

I've created a static-body entity and set up an event handler to let me know when the player collides with it. I'm trying to find out which face of the body the player collided with, so I logged event.detail for the collision event, but it wasn't clear to me that that information was anywhere in the detail property. I checked event.detail.contact, and nothing stood out to me as anything that would represent the face of the body where the two objects intersected.

I'm new to aframe, so it's possible I missed this.

Thank you for all your awesome work!

The physics system seems to break (everything appears in the wrong place) if placed inside a parent a-entity that has a translation/rotation. For example:

<a-scene physics>
	<a-entity position="3 0 0">
		<a-plane color="green" static-body height="3" width="3" rotation="-90 0 0" position="0 0 -5"></a-plane>
		<a-box color="red" dynamic-body position="0 5 -5"></a-box>
	</a-entity>
</a-scene>

Here you will see the red box will fall and miss the green floor completely. But if you change the parent a-entity position to "0 0 0" then it lands as expected.

At a guess, this may be a similar problem to one I lodged a PR request against for sphere-collider: c-frame/aframe-extras@6f5627e (basically you are calling getWorldPosition for one set of co-ordinates but not the other)

It's fine if the rotation exists but is "0 0 0", so it's not the nesting per se that upsets it.

working on a bow and arrow and running into some issues trying to dynamically add the arrow to the scene and make it fly.

what's the proper way to make sure that the arrow's dynamic body is available to apply an impulse?

i get an entity.body is undefined error if i do it this way

    var matrixWorld = bow.object3D.matrixWorld;
    var shotDirection = new THREE.Vector3();
    shotDirection.setFromMatrixPosition(matrixWorld);

    var entity = document.createElement('a-entity');
    entity.className = "arrow"
    entity.setAttribute('obj-model', 'obj: #arrow-obj; mtl: #arrow-mtl')
    entity.setAttribute('scale', '0.05 0.05 0.05 ');
    entity.setAttribute('dynamic-body', 'shape:auto');
    scene.appendChild(entity);

    entity.addEventListener('loaded', function() {
      var shotPosition = entity.getAttribute('position');
      entity.body.applyImpulse(
        /* impulse */
        new CANNON.Vec3.copy(shotDirection),
        /* world position */
        new CANNON.Vec3().copy(shotPosition)
      );

    });

is there another technique i should be using? a pool or something?

thanks!!

From c-frame/aframe-extras#79; this is helpful for the inspector.

Was trying to figure out how to get the player camera to act as a rigid body but ended up having to use aframe-extras lib for this as it doesn't seem like this was ported over to the new physics system. Please let me know if I missed something.

Mass never mentioned explicitly

Hi,

I am trying to create a bullet attracted by the gravity but I am facing a little problem. I am not sure if it comes from a bug within the physics system or if I am just doing it wrong.

The idea would be that, a gun, when triggered, create a a-sphere with an impulse applied so the sphere goes on the same vector than where the gun is heading (red line show what is happening right now, green light show what should happen) but the sphere doesn't appear.

Here is code appending the sphere to the gun and applying the impulse:

CURSOR.addEventListener("click", function(evt){
        var matrixWorld = GUN.object3D.matrixWorld;
        var shotDirection = new THREE.Vector3();
        shotDirection.setFromMatrixPosition(matrixWorld);

        var bullet = document.createElement("a-sphere");
        bullet.setAttribute("color","blue"); 
        bullet.setAttribute("radius","0.03");
        bullet.setAttribute("dynamic-body","shape: sphere;");
        bullet.addEventListener("body-loaded", function(evt) {
          bullet.body.applyImpulse(
            /* impulse */        new CANNON.Vec3().copy(shotDirection),
            /* world position */ new CANNON.Vec3().copy(GUN.getAttribute("position"))
          );
        });
        GUN.appendChild(bullet);
      })

As said earlier and because I do not see errors in the dev console, I am definitively not sure if this a problem from my side or within the physic system so I thought filling an issue would be the most logic to do.

Thanks in advance!

I'm facing a issue when trying to create collision geometries with static-body flag.
I have created a custom loader component to update the loading screen progress bar.

However when using it, the results from static-body are inconsistent. Sometimes on page load both object don't have collisions, sometimes one has and sometimes both do. This is most likely something to do with the loading order of objects.

<!-- Geometry -->
<a-entity objloader='file: ceilingBaked' 
		  position="0 0 0"
		  static-body="shape: auto"></a-entity>
<a-entity objloader='file: interiorBaked' 
		  position="0 0 0"
		  static-body="shape: auto"></a-entity>

init: function () {

	thisElement = this.el.object3D;
	var objName = this.data.file;

	// Loader //
	loader = new THREE.OBJLoader(manager);

	loader.load( "geo/" + objName + ".obj", function ( object ) {

		var material = new THREE.MeshBasicMaterial();
		loader = new THREE.TextureLoader(manager);

		object.traverse( function ( child ) {
			if (child instanceof THREE.Mesh) {
				child.material = material;
				child.material.map = loader.load( "img/" + objName + '_nonCompressed' + ".jpg" );
				addGeo = child;
			}	
		} );
    } );
}

The whole page is here:
https://toseben.github.io/interactive_webViz/aframe_defineComponent.html

I already fixed the issue by approaching the loading differently, by using with a custom shader instead.
https://toseben.github.io/interactive_webViz/aframe_collision.html

Current implementation of protocol.js will use a lot of memory. Should (1) write unit tests so it can be refactored safely, and (2) re-implement using Transferrable or SharedArrayBuffer objects.

It's not clear from the documentation, but static-body components do not appear to collide with each other?

In this example you can use WASD to move the green box. The blue box never registers 'collide'. Is this by design? If so, is there a way to use the (very useful) collision system outside of dynamic-body?

<html>
<head>
	<script src="dist/aframe-v0.4.0.js"></script>
	<script src="dist/aframe-physics-system.js"></script>

	<script>
		AFRAME.registerComponent('detect-collision', {

		  init: function ( t ) {

			this.el.addEventListener( 'collide', function ( e ) {
				console.log( 'collision' );
			} );
		  }
		} );
	</script>
</head>
<body>
	<a-scene physics="debug: true">

		<a-entity camera></a-entity>
		<a-box static-body color="green" position="-2 0 -3" wasd-controls reset-on-collision></a-box>
		<a-box static-body color="blue" position="0 0 -3" detect-collision></a-box>

	</a-scene>
</body>
</html>

I can't get my package to install on Travis-CI with aframe-physics-system as a dev dependency.

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants cannon@github:donmccurdy/cannon.js#v0.6.2-dev1

When I add a lot of objects to a scene, the models start twitching within their bounding boxes, as seen here...

The syntax for these models is as follows...
<a-entity scale=".5 .5 .5" obj-model="obj: #sketch-obj; mtl: #sketch-mtl" dynamic-body="shape: box; mass: 2"></a-entity>

You can try it here, click the mouse button to add objects.
http://flukeout.github.io/test/

Any info or advice is helpful!

I'm surely doing something wrong here, but here is a super basic example of what I'm trying to do (real implementation is in aframe-react).

# html snippet
<a-scene id="myscene" physics="debug: true">

</a-scene>

From console in browser:

var box = document.createElement('a-box')
box.setAttribute('dynamic-body', '');
document.getElementById('myscene').appendChild(box)

The box is appended with the proper dynamic-body attribute, but it acts as though it is a normal entity with no physics attached.

Do I need to create a custom component in order for this to work properly?

Hi, I've been trying to fix this myself but no luck.

When I include this:
<a-entity hoverable grabbable stretchable drag-droppable obj-model="obj: #my-obj; mtl: #my-mtl" scale="1 1 1" position="1 3 -5" class="thing" dynamic-body="shape: box"></a-entity>
My .obj model hangs in mid-air, with no bounding box.

If I use shape: auto, the object drops through the floor, which is:
<a-plane static-body rotation="-90 0 0" width="30" height="30" color="grey"></a-plane>

hoverable grabbable stretchable drag-droppable is from https://github.com/wmurphyrd/aframe-super-hands-component. I have physics debug on.

Thanks!

I have implanted a mapping with multiple walls in obj. But in no way do I get any collisions detected. Does it work in obj with multiple vertices?

Hi ! I was playing and creating a simple shot game, when click I add via createElement a a-sphere child and applyImpulse when collision is detected I remove the bullet and the target (the other object) and have that error
Uncaught TypeError: Cannot read property '_wakeUpAfterNarrowphase' of undefined at World.internalStep (aframe-physics.min.js:7) at World.step (aframe-physics.min.js:7) at r.tick (aframe-physics.min.js:8) at aframe.min.js:250 at Array.forEach (<anonymous>) at HTMLElement.value (aframe.min.js:250) at HTMLElement.value (aframe.min.js:250) at aframe.min.js:369

Am I doing something wrong? and other thing is that if add dynamic-body to a entity created via javascript
(like createElement) the body propery doesnt exists so I use a 1s timeout hack to use the body property

Take kinematic-body and a-grid out of example code

component instance name is misleading:

constraint__hinge="type: coneTwist;

I have this A-Frame scene graph:

<a-box id="cardboard" dynamic-body="mass: 0.01" position="0 0.9 -0.60" geometry="width: 0.05; depth: 0.05; height: 0.003" color="#008000">
      <a-box id="chip" position="0 0.002 0.01" geometry="width: 0.02; depth: 0.02; height: 0.001" color="#000"></a-box>
</a-box>

I want the nested box to not have physics and keep its position relative to its parent. But as soon as I came up with this setup, running the simulation make collision body to be misplaced. What am I doing wrong?

I've been trying for a week now to piece together a physics-based projectile system. I pieced together a few examples from here on how to get applyImpulse to work on a dynamically generated entity.

Reduced test case: https://codepen.io/davatron5000/pen/XgQzEK/?editors=0010

• Using the undocumented body-loaded event.
• Copypasta of the working ForcePush example.
• Objects have a body, hit the ground, and stack up because they have no foward momentum.
• Don mentioned in Slack that this might need a setTimeout but when that's applied, objects hit the floor THEN have the impulse applied.

Not sure if there's a better way to do this or if something is broken here. Filing an issue per @donmccurdy recommendation in Slack.

See discussion on c-frame/aframe-extras#44.

... in a new "Events" section.

• body-loaded
• collide

Hey!
I've notice that <a-triangle> and <a-link> are not responding to dynamic body.
Thanks!

Ok so, the plan.

Body and World objects will be replaced with stubs or proxies. Modifications to either are recorded and sent (batched) to a remote driver. The driver pushes back, asynchronously, data about the state of all current bodies, and intersections.

Client operations:

• body.applyImpulse()
• body.applyForce()
• world.add/removeConstraint()
• world.add/removeBody()

Most/all property modifications should also be persisted.

Drivers:

• LocalPhysicsDriver.js
• WorkerPhysicsDriver.js
• Client / ServerPhysicsDriver.js (someday)

Serialization:

Driver will, at each tick, provide a description of scene state. Rough sketch:

{
  type: 'step',
  bodies: [ ... array of object IDs, lengths ],
  collisions: [ ... ? ... ],
  data: [ ... arraybuffer of positions/velocities/angularVelocities ... ]
}

Data, as an arraybuffer, may be passed back to avoid copying data. This might be a very premature optimization.

Distributed files:

• aframe-physics-system.full.js (aframe lib + local driver)
• aframe-physics-system.js + worker-physics-driver.js
• aframe-physics-system.js + client-physics-driver.js / server-physics-driver.js

Open questions:

• Serializing state of a Cannon.Body isn't hard, but serializing the initialization data (shapes, potentially nested) kind of seems painful. Can users still call addBody themselves? What's the most precise way to represent geometry?
• How to make collisions (events, or just the list) available to the aframe client?

Is there an efficient way to update the size of physics bodies to match changes to entity scale? It can be accomplished via removeBody and initBody, but this seems to have a cumulative impact on performance.

Hi!

I am enjoying debugging aframe-physics-system with the debug option set to true so I can see the wireframes.

However, the cone wireframes seem inverted, even though the physics system is actually reading the real geometry, not the wireframe geometry. It's possible that just the wireframe is inverted by accident?

For reference:

Hello,
I'm trying to use a convex hull collider for my .obj model (which you can view here), but was running into issues with assigning the collider, where the wireframe would highlight only a small section of the whole model, and even that section would pass through my other objects (simple cubes with box colliders). So I then switched to a simpler model to see if it worked.
I load the .obj models (and .mtls if they have them) as a-asset-items, and then create a-entities as follows: <a-entity id="hull" class="model" obj-model="obj: #hull" position="-0.5 1 1" collision-filter="group: red; collidesWith: default, red" stuck dynamic-body="shape: hull; linearDamping: 0.99; angularDamping: 0.99" material="color: red"></a-entity>. However, for both the complex model and this simpler one, I get the error below. I even tried giving primitive cubes a hull collider and got this same error.

Upon investigating the code in aframe-extras.js, it looks like the problem occurs when getGeometry() is called, where getGeometry calls getMeshes(), and the meshes that are pushed actually do not even have any vertices component.
So then I thought maybe it's caused by the object not being loaded completely, so I tried adding an event listener for 'body-loaded' that would add the dynamic-body component afterwards. When I tried this, it looks like the object is given a dynamic-body with a box shape by default, and this doesn't get overridden by the "setAttribute" that I call later.
So I thought perhaps the problem could be in the way the .obj models are loaded on aframe, and decided to try using .dae models instead. However, that threw a different error, shown below:

This error keeps popping up in the console endlessly, with the number in the [brackets] incrementing each call.
I hope you can help me out with this :)
Thanks!