如何将视频放在身体上，Matter.js答案

【问题标题】：How to put a video on a body, Matter.js如何将视频放在身体上，Matter.js
【发布时间】：2022-07-04 06:32:45
【问题描述】：

如何制作附加到一个matter.js 主体/复合材料的视频？

var body = Bodies.circle(
    Common.random(10, render.options.width), 
    Common.random(10, render.options.height),
    radius,
    {
        render: {
            sprite: {
                texture: 'jaime.mp4'
            }
        },
        mass: Common.random(150, 160),
        frictionAir: 0,
        plugin: {
            attractors: [
                MatterAttractors.Attractors.gravity
            ],
            wrap: {
                min: { x: 0, y: 0 },
                max: { x: render.options.width, y: render.options.height }
            }
        }
    }
)
World.add(world, body);
};

当我看到渲染它时，我只看到一个空白的黑体。

【问题讨论】：

视频在哪里？我只看到一个 png 图像。请记住，MJS 渲染器纯粹用于调试/演示目的，因此如果您想要视频，可以通过 using the DOM as a frontend renderer 为无头 MJS 物理后端完成。

标签： javascript matter.js

【解决方案1】：

正如其他几篇文章中更详细描述的那样，Matter.js 的内置渲染器用于简单的演示、调试和原型设计用例。对于除此之外的大多数应用程序，您需要使用能够灵活处理视频等内容的自定义渲染器。

例如，HTML5 是一个非常灵活的渲染器，可以让您将 MJS 物理插入任意元素。视频没问题：

const engine = Matter.Engine.create();
const box = {
  body: Matter.Bodies.rectangle(150, 0, 128, 72),
  elem: document.querySelector("#box"),
  render() {
    const {x, y} = this.body.position;
    this.elem.style.top = `${y - 36}px`;
    this.elem.style.left = `${x - 64}px`;
    this.elem.style.transform = `rotate(${this.body.angle}rad)`;
  },
};
const ground = Matter.Bodies.rectangle(
  200, 200, 400, 120, {isStatic: true}
);
const mouseConstraint = Matter.MouseConstraint.create(
  engine, {element: document.body}
);
Matter.Composite.add(
  engine.world, [box.body, ground, mouseConstraint]
);
(function rerender() {
  box.render();
  Matter.Engine.update(engine);
  requestAnimationFrame(rerender);
})();

#box {
  position: absolute;
  background: #111;
  height: 72px;
  width: 128px;
  top: -130px;
  left: -130px;
  cursor: move;
}

#ground {
  position: absolute;
  background: #666;
  top: 140px;
  height: 120px;
  width: 400px;
}

html, body {
  position: relative;
  height: 100%;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
<div id="box">
  <video width="128" muted autoplay>
    <source src="https://upload.wikimedia.org/wikipedia/commons/b/b5/Slow_Motion_Salad_-_Sony_FS700.webm" type="video/webm">
    Your browser does not support HTML video.
  </video>
</div>
<div id="ground"></div>

另请参阅：Using Matter.js to render to the DOM or React

【讨论】：