Matter.js布料模拟示例无法运行，页面空白求助

问题根源 #

你的代码存在三个关键问题导致页面空白：

• 未引入Matter.js核心库，代码里的Matter.Engine等模块无法被识别
• 仅定义了Example.cloth函数，但没有调用它来启动模拟
• 代码中存在HTML转义字符（如<），会导致JS语法错误

修复步骤及完整代码 #

直接使用以下完整HTML文件，替换你原来的内容：

<!DOCTYPE html>
<html>
<head>
    <title>Matter.js Cloth Simulation</title>
    <!-- 引入Matter.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/matter-js@0.19.0/build/matter.min.js"></script>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script>
        var Example = Example || {};

        Example.cloth = function() {
            var Engine = Matter.Engine,
                Render = Matter.Render,
                Runner = Matter.Runner,
                Body = Matter.Body,
                Composites = Matter.Composites,
                MouseConstraint = Matter.MouseConstraint,
                Mouse = Matter.Mouse,
                Composite = Matter.Composite,
                Bodies = Matter.Bodies;

            // 创建引擎
            var engine = Engine.create(),
                world = engine.world;

            // 创建渲染器
            var render = Render.create({
                element: document.body,
                engine: engine,
                options: {
                    width: 800,
                    height: 600,
                    background: '#f0f0f0' // 添加背景色，方便查看
                }
            });

            Render.run(render);

            // 创建运行器
            var runner = Runner.create();
            Runner.run(runner, engine);

            // 创建布料
            var cloth = Example.cloth.cloth(200, 200, 20, 12, 5, 5, false, 8);

            // 固定布料顶部的20个粒子
            for (var i = 0; i < 20; i++) {
                cloth.bodies[i].isStatic = true;
            }

            // 添加物体到世界
            Composite.add(world, [
                cloth,
                Bodies.circle(300, 500, 80, { isStatic: true, render: { fillStyle: '#060a19' }}),
                Bodies.rectangle(500, 480, 80, 80, { isStatic: true, render: { fillStyle: '#060a19' }}),
                Bodies.rectangle(400, 609, 800, 50, { isStatic: true })
            ]);

            // 添加鼠标交互
            var mouse = Mouse.create(render.canvas),
                mouseConstraint = MouseConstraint.create(engine, {
                    mouse: mouse,
                    constraint: {
                        stiffness: 0.98,
                        render: {
                            visible: false
                        }
                    }
                });

            Composite.add(world, mouseConstraint);

            // 同步鼠标与渲染器
            render.mouse = mouse;

            // 设置渲染视口
            Render.lookAt(render, {
                min: { x: 0, y: 0 },
                max: { x: 800, y: 600 }
            });

            return {
                engine: engine,
                runner: runner,
                render: render,
                canvas: render.canvas,
                stop: function() {
                    Matter.Render.stop(render);
                    Matter.Runner.stop(runner);
                }
            };
        };

        Example.cloth.title = 'Cloth';
        Example.cloth.for = '>=0.14.2';

        /**
        * 创建布料对象
        * @method cloth
        * @param {number} xx 起始X坐标
        * @param {number} yy 起始Y坐标
        * @param {number} columns 列数
        * @param {number} rows 行数
        * @param {number} columnGap 列间距
        * @param {number} rowGap 行间距
        * @param {boolean} crossBrace 是否添加交叉约束
        * @param {number} particleRadius 粒子半径
        * @param {} particleOptions 粒子配置
        * @param {} constraintOptions 约束配置
        * @return {composite} 布料组合体
        */
        Example.cloth.cloth = function(xx, yy, columns, rows, columnGap, rowGap, crossBrace, particleRadius, particleOptions, constraintOptions) {
            var Body = Matter.Body,
                Bodies = Matter.Bodies,
                Common = Matter.Common,
                Composites = Matter.Composites;

            var group = Body.nextGroup(true);
            particleOptions = Common.extend({ inertia: Infinity, friction: 0.00001, collisionFilter: { group: group }, render: { visible: false }}, particleOptions);
            constraintOptions = Common.extend({ stiffness: 0.06, render: { type: 'line', anchors: false } }, constraintOptions);

            var cloth = Composites.stack(xx, yy, columns, rows, columnGap, rowGap, function(x, y) {
                return Bodies.circle(x, y, particleRadius, particleOptions);
            });

            Composites.mesh(cloth, columns, rows, crossBrace, constraintOptions);

            cloth.label = 'Cloth Body';

            return cloth;
        };

        // 调用函数启动模拟
        Example.cloth();
    </script>
</body>
</html>

关键修复说明 #

• 引入Matter.js库：通过CDN引入了稳定版的Matter.js，确保所有模块能正常加载
• 调用启动函数：在代码末尾添加了Example.cloth()，触发模拟初始化
• 修复转义字符：将<替换为正常的<，避免JS语法错误
• 添加背景色：给渲染器添加了背景色，方便确认页面是否正常显示

内容的提问来源于stack exchange，提问作者Arjun Pant