Cannon.jsเป็น เอ็นจิ้นฟิสิกส์ 3 มิติJavaScript แบบโอ เพนซอร์สที่สร้างโดย Stefan "schteppe" Hedman ^{[ 2 ]}แตกต่างจากไลบรารีเอ็นจิ้นฟิสิกส์ที่แปลงจาก C++ เป็น JavaScript Cannon.js เขียนด้วย JavaScript ตั้งแต่เริ่มต้นและสามารถใช้ประโยชน์จากคุณสมบัติของมันได้^{[ 3 ]}ในการเปรียบเทียบกับ Ammo.js ในปี 2013 พบว่า Cannon.js นั้น "กะทัดรัดกว่า เข้าใจง่ายกว่า มีประสิทธิภาพมากกว่า และเข้าใจง่ายกว่า" แต่ไม่มีคุณสมบัติมากเท่า^{[ 4 ]}

Cannon.js รองรับรูปทรงต่อไปนี้: ทรงกลม ระนาบ กล่อง ทรงกระบอกรูปทรงหลายเหลี่ยมนูนอนุภาค และฟิลด์ความสูงชุดรูปทรงนี้ตรงกับชุดที่ใช้โดยเอ็นจิ้นการเรนเดอร์ เช่นThree.jsและBabylonแต่ไม่สมบูรณ์ ตัวอย่างเช่น ไม่เพียงพอสำหรับ X3DOM ^{[ 4 ]} ซึ่ง เป็นแอปพลิเคชันของX3D ที่อนุญาตให้รวมกราฟิก 3 มิติในหน้า เว็บโดยไม่ต้องใช้ปลั๊กอิน^{[ 5 ]}

เอนจินฟิสิกส์ใช้พลศาสตร์ของวัตถุแข็งการตรวจจับการชน แบบไม่ต่อเนื่อง และตัวแก้ข้อจำกัดGauss-Seidel ^{[ 6 ]} สามารถทำการจำลองผ้า ได้ ^{[ 7 ]}

Cannon.js สามารถใช้ร่วมกับ Three.js และ Babylon.js ^{[ 8 ] [ 9 ]}ซึ่งเป็นตัวเรนเดอร์ WebGL เพื่อสร้างฉาก 3 มิติแบบอิงฟิสิกส์ นอกจากนี้ยังสามารถใช้เพื่อจัดเตรียมการซิงโครไนซ์ฟิสิกส์แบบเครือข่ายสำหรับเกมออนไลน์แบบผู้เล่นหลายคนโดยใช้ Lance.gg ^{[ 10 ]}

โค้ดตัวอย่างด้านล่างสร้างทรงกลมบนระนาบ ดำเนินการจำลอง และพิมพ์ผลการจำลองทรงกลมลงในคอนโซล โปรดทราบว่า Cannon.js ใช้หน่วย SI (เมตร กิโลกรัม วินาที ฯลฯ) ^{[ 11 ]}

// ตั้งค่าโลกของเราvar world = new CANNON.World ( ) ; world.gravity.set ( 0 , 0 , -9.82 ) ; // m / s²// สร้างทรงกลมvar radius = 1 ; // เมตรvar sphereBody = new CANNON.Body ( { mass : 5 , // กิโลกรัมposition : new CANNON.Vec3 ( 0 , 0 , 10 ) , // เมตรshape : new CANNON.Sphere ( radius ) } ) ; world.addBody ( sphereBody ) ;// สร้างระนาบvar groundBody = new CANNON.Body ( { mass : 0 // mass == 0 ทำให้วัตถุอยู่นิ่ง} ); var groundShape = new CANNON.Plane () ; groundBody.addShape ( groundShape ) ; world.addBody ( groundBody ) ;var fixedTimeStep = 1.0 / 60.0 ; // วินาทีvar maxSubSteps = 3 ;// เริ่มลูปการจำลองvar lastTime ; ( function simloop ( time ) { requestAnimationFrame ( simloop ) ; if ( lastTime !== undefined ) { var dt = ( time - lastTime ) / 1000 ; world.step ( fixedTimeStep , dt , maxSubSteps ); } console.log ( " ตำแหน่ง แกน z ของ ทรง กลม: " + sphereBody.position.z ) ; lastTime = time ; } ) ();

• cannon.jsบนGitHub