复现Google Gravity效果时受重力元素在网页底部边界半隐藏如何解决

解决方法 #

出现该问题的核心原因是Box2D物理世界的底部碰撞边界没有预留元素自身高度的冗余，元素下坠到边界时一半体积落在碰撞边界外，被overflow: hidden属性裁剪。按以下步骤修改即可：

• 调整物理世界底部边界值
  打开你的gravity.js文件，找到定义底部静态刚体的代码段，原有逻辑大概率直接使用window.innerHeight作为底部边界的Y轴坐标，需要额外加上所有重力元素的最大高度值作为冗余：

  // 先计算所有带box2d类的元素的最大高度
  let maxGravityElHeight = 0
  document.querySelectorAll('.box2d').forEach(el => {
    maxGravityElHeight = Math.max(maxGravityElHeight, el.offsetHeight)
  })
  // 原有边界Y值计算增加maxGravityElHeight的偏移
  const bottomBoundaryY = (window.innerHeight + maxGravityElHeight) / scale // scale为你代码里的物理世界缩放系数
  // 用新的bottomBoundaryY值创建底部静态碰撞刚体即可
  

• 核对刚体形状参数
  创建元素对应刚体的形状时，注意Box2D的多边形形状参数传入的是元素的半宽、半高，不要直接传入元素完整宽高，否则碰撞盒尺寸会是实际元素的两倍，也会导致元素提前掉出可视区域：

  // 正确示例：宽高除以2作为半宽半高参数
  const shape = new b2PolygonShape()
  shape.SetAsBox(el.offsetWidth / 2 / scale, el.offsetHeight / 2 / scale)
  

• 临时兼容方案
  如果你暂时不想修改物理引擎逻辑，可以直接给body添加样式：

  body {
    height: calc(100vh + 100px);
    padding-bottom: 100px;
  }
  

  100px为预留的元素高度冗余，可根据你页面上最大的重力元素高度调整。

内容的提问来源于stack exchange，提问作者benson chow