matter-dom-plugin
v1.0.0
Published
A plugin to apply matter.js's physics to DOM elements
Downloads
92
Readme
matter-dom-plugin
A plugin for matter.js
This plugin aims to bring dom rendering for the Matterjs physics engine. Objects are created in a html-first declarative way so that the application logic and view are seperate.
Features
- DOM renderer
- DOM bodies (declarative HTML)
- Mouse constraint for DOM
Install
npm install matter-dom-pluginSee matter.js on using plugins
Usage
- Declare physics bodies in scene
<head>
<style>
#block{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="debug"></div>
<div id="block" matter></div>
</body- Initialize Matterjs world
(function(){
Matter.use('matter-dom-plugin');
/** Aliases **/
var Engine = Matter.Engine;
var Runner = Matter.Runner;
var RenderDom = Matter.RenderDom;
var DomBodies = Matter.DomBodies;
var MouseConstraint = Matter.MouseConstraint;
var DomMouseConstraint = Matter.DomMouseConstraint;
var Mouse = Matter.Mouse;
/** Set up engine and renderer **/
var engine = Engine.create();
var world = engine.world;
var runner = Runner.create();
Runner.run(runner, engine);
var render = RenderDom.create({
engine: engine
});
RenderDom.run(render);
/** Initialize physics bodies **/
var block = DomBodies.create({
el: '#block',
render: render,
position: {x: 100, y: 100},
bodyType: 'block'
});
/** Mouse control **/
var mouse = Mouse.create(document.body);
var MouseConstraint = DomMouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.1,
render: {
visible: false
}
}
});
World.add(world, MouseConstraint);
})();