matter物理引擎模拟莲子物理垂下效果-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：matter物理引擎模拟莲子物理垂下效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
canvas {
  background-color: darkblue;
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
}
</style>

</head>
<body translate="no">
<canvas id="mycanvas"></canvas>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/matter.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/scrawl-canvas@8.1.0.js"></script>
<script type="module">
import scrawl from "https://unpkg.com/scrawl-canvas@8.1.0";

let canvas = scrawl.library.canvas.mycanvas;

let Engine = Matter.Engine,
  Render = Matter.Render,
  Runner = Matter.Runner,
  Body = Matter.Body,
  Composites = Matter.Composites,
  MouseConstraint = Matter.MouseConstraint,
  Mouse = Matter.Mouse,
  World = Matter.World,
  Bodies = Matter.Bodies;

// create Matter-js engine
let engine = Engine.create(),
  world = engine.world;

// add Matter-js bodies
let group = Body.nextGroup(true),
  particleOptions = {
    friction: 0.00001,
    collisionFilter: { group: group },
    render: { visible: false }
  },
  constraintOptions = { stiffness: 0.06 },
  cloth = Composites.softBody(
    200,
    200,
    20,
    12,
    5,
    5,
    false,
    8,
    particleOptions,
    constraintOptions
  );

for (var i = 0; i < 20; i++) {
  cloth.bodies[i].isStatic = true;
}

let matterCircle = Bodies.circle(300, 500, 80, { isStatic: true });
let matterRectangle = Bodies.rectangle(500, 480, 80, 80, { isStatic: true });
let ground = Bodies.rectangle(400, 609, 800, 50, { isStatic: true });

World.add(world, [cloth, matterCircle, matterRectangle, ground]);

// Add mouse control

// - We need to rewrite the Matter-js Mouse.create method
//   to use Scrawl-canvas mouse position functionality
Mouse.create = function (element) {
  var mouse = {};

  if (!element) {
    Common.log(
      "Mouse.create: element was undefined, defaulting to document.body",
      "warn"
    );
  }

  mouse.element = element || document.body;
  mouse.absolute = { x: 0, y: 0 };
  mouse.position = { x: 0, y: 0 };
  mouse.mousedownPosition = { x: 0, y: 0 };
  mouse.mouseupPosition = { x: 0, y: 0 };
  mouse.offset = { x: 0, y: 0 };
  mouse.scale = { x: 1, y: 1 };
  mouse.wheelDelta = 0;
  mouse.button = -1;
  mouse.pixelRatio =
    parseInt(mouse.element.getAttribute("data-pixel-ratio"), 10) || 1;

  mouse.sourceEvents = {
    mousemove: null,
    mousedown: null,
    mouseup: null,
    mousewheel: null
  };

  mouse.mousemove = function (event) {
    var position = canvas.base.here,
      touches = event.changedTouches;

    if (touches) {
      mouse.button = 0;
      event.preventDefault();
    }

    mouse.absolute.x = position.x;
    mouse.absolute.y = position.y;
    mouse.position.x = position.x;
    mouse.position.y = position.y;
    mouse.sourceEvents.mousemove = event;
  };

  mouse.mousedown = function (event) {
    var position = canvas.base.here,
      touches = event.changedTouches;

    if (touches) {
      mouse.button = 0;
      event.preventDefault();
    } else {
      mouse.button = event.button;
    }

    mouse.absolute.x = position.x;
    mouse.absolute.y = position.y;
    mouse.position.x = position.x;
    mouse.position.y = position.y;
    mouse.mousedownPosition.x = mouse.position.x;
    mouse.mousedownPosition.y = mouse.position.y;
    mouse.sourceEvents.mousedown = event;
  };

  mouse.mouseup = function (event) {
    var position = canvas.base.here,
      touches = event.changedTouches;

    if (touches) {
      event.preventDefault();
    }

    mouse.button = -1;
    mouse.absolute.x = position.x;
    mouse.absolute.y = position.y;
    mouse.position.x = position.x;
    mouse.position.y = position.y;
    mouse.mouseupPosition.x = mouse.position.x;
    mouse.mouseupPosition.y = m.........完整代码请登录后点击上方下载按钮下载查看