cannon.js | A lightweight 3D physics engine written in JavaScript | Game Engine library
kandi X-RAY | cannon.js Summary
kandi X-RAY | cannon.js Summary
A lightweight 3D physics engine written in JavaScript.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of cannon.js
cannon.js Key Features
cannon.js Examples and Code Snippets
Lines of Code : 404License : Strong Copyleft (CC BY-SA 4.0)
Copyimport { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Subscription } from 'rxjs';
import { miffmpeg -vaapi_device /dev/dri/renderD128 -hwaccel vaapi -re -i http://server:port -vf 'format=nv12|vaapi,hwupload' -c:v vp9_vaapi -global_quality 50 -bf 1 -bsf:v vp9_raw_reorder,vp9_superframe -f segment -segment_time 5 -segment_format_optvar world, mass, body, shape, timeStep = 1 / 60,
camera, scene, renderer, geometry, material, mesh,controls;
initThree();
initCannon();
animate();
function initCannon() {
world = new CANNON.World();
world.gravity.set(0, 0, 0Community Discussions
Trending Discussions on cannon.js
QUESTION
So I'm making a ball bounce in spark AR with cannon.js. Everything was working fine until I wanted to get the position of the forehead from the facetracker via the patch editor to a script.
Error:
...ANSWER
Answered 2020-Oct-23 at 10:21I've found a selution when working with cannon.js. cannon.js has a kind of update function so you can use .pinLastValue() because it does this every frame in order to update the physics.
My code:
QUESTION
I'm just diving into Cannon.js and was wondering how to achieve this.
My use case is that I have a circular area on the floor where if the player steps inside, they will trigger some interactions. I didn't want to do raycasting for this because I was already using Cannon.js for other collisions and felt that raycasting would add another layer of performance latency.
Right now my player object is a simple sphere shape RigidBody that I move by setting its velocity. I made the interaction area to be a Cylinder shape with a very low height. However, when the player goes over this object, the collision gets registered successfully but the player spins out of control and there's a noticeable bump in the movement.
Is there a standard way to register these kinds of objects for Cannon.js? I would like it so there is no bump, almost as if it's an invisible object that the player can pass through but it still registers collisions.
...ANSWER
Answered 2020-Jul-21 at 11:44A typical way of solving this issue in games is the usage of triggers. So physics engines are unrelated to this topic.
A trigger can be implemented as a simple bounding volume like a bounding sphere. In three.js, it's an instance of THREE.Sphere. Each simulation step, you test if the trigger was activated by the player. You can do this in various ways. For example by just testing if the player's position is inside the bounding sphere via Sphere.containsPoint(). Or you represent the player as another bounding volume like a bounding sphere or AABB (via THREE.Box3) and then perform an intersection test.
Both approaches are very fast and should not noticeable affect the performance of your app. Even if you are doing these tests with more game entities who potentially activate triggers.
Here is a simple example that demonstrates the concept of triggers in Yuka:
QUESTION
I have seen many cloth simulations in three.js . I found it is done only with 2d plane surfaces . But is there a way that I can simulate a 3d cloth model like the one below ..
To be simulated like a cloth in the 3d scene.
There are many tutorials for plane 2d simualtion like
And the code for them is given below...
...ANSWER
Answered 2020-Apr-22 at 14:44The code you posted will not do clothing as it as no collisions. The code in ammo.js will but you need to generate the clothing yourself.
Cloth is typically simulated using masses and springs
QUESTION
I wanted to display my loaded .obj file in wireframe mode.. I got to know about the WireFrameGeometry But for somereason the .mtl texture only gets display .
Below is the code ..
...ANSWER
Answered 2020-Apr-20 at 09:30
object.traverse(function(child) {
if (child.isMesh) {
child.material.wireframe = true;
}
}
QUESTION
I'm trying to figure out how to create a minimal car with physics using Three.js and Cannon.js. I have created my visual and physics-based elements of my car and wheels, and my car responds to up arrow and left/right arrow commands to speed up and turn:
...ANSWER
Answered 2020-Apr-03 at 18:36Aha, I was applying the hacky rotation to the mesh when I should have been applying it to the geometry!
The answer below just adds one line to the vehicle.wheelInfos loop:
QUESTION
The cannon.js project is in github url: https://github.com/schteppe/cannon.js
But I cannot find anyways to build this source code to get cannon.js library in binary folder.
Can you tell me the way to build this source code?
...ANSWER
Answered 2019-Aug-23 at 19:49QUESTION
I created two boxes and want to set a lock constraint but two boxes are overlapping.
How can I set that without explosion with cannon.js?
...ANSWER
Answered 2019-Aug-21 at 08:21Try this
QUESTION
I'm using Cannon.js with Three.js.
I've created a scene which consists of 1 heightfield and 5 balls. I want the balls to roll around the heightfield, using the cannon.js physics.
On mouse move, I rotate the heightfield along the y-axis to make the spheres roll back and forth.
I have an update loop, which copies the sphere position & quaternion from cannon.js and applies to the visual sphere of three.js. The heightfield is also updated at the same time as the three.js visual floor. Both of these run in a for loop, in requestAnimationFrame.
...ANSWER
Answered 2018-Oct-30 at 08:41Directly (i.e. "instantly") setting position/rotation is likely to break collision handling in all physics engines, including cannon.js . Effectively you are teleporting things through space, causing objects to get stuck in or pass through each other.
What you should do is
- Set the velocity (both .velocity and .angularVelocity) or apply forces to the Cannon.js bodies
- Copy the transform of those bodies to your visual meshes (notices this is exactly the other way around of what you are currently doing in the code)
Determining the right amount of force to apply to get the desired visual behavior is usually the tricky part.
QUESTION
I have a bunch of planes that fit together to form terrain. Each individual plane has it's own cannon.js body (I use three.js for rendering visuals) for collision. Due to memory constraints I de-render each object when the player moves to far away from the object. I can de-render objects easily in three.js just by turning them invisible, but there's no clear way to do this in cannon.js. Basically I want to disable a cannon.js object without deleting it outright.
I've already looked through the docs and there's basically nothing on how to do this. I've also seen no questions on any form on this topic.
Example code below to show you how I want to implement this.
...ANSWER
Answered 2019-Apr-10 at 17:05To exclude a CANNON.Body from the simulation, run the following:
QUESTION
I'm in an A-Frame scene, using its underlying three.js to create objects like:
...
ANSWER
Answered 2019-Mar-16 at 10:47I'm quite sure you cannot add DOM attributes to js non-DOM objects, such as THREE objects.
The static body attribute is actually creating a new object (CANNON.Body with its type set to Cannon.Body.STATIC). What aframe-physics does is synchronization - the THREE.js mesh with the Cannon.Body.
Source code: body creation here, and syncing here.
You could create a CANNON.Body and synchronize its position with your box, but i would approach it differently:
You can have an empty a-frame entity with the physics attribute:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install cannon.js
Install the cannon package via NPM:.
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
