我如何使用 Ammo.btCompoundShapeBullet Physics 的 JavaScript 端口? 解决方案:另一条评论:

问题描述

我使用的是 Ammo.js,它是 C++ Bullet Physics 的直接 JavaScript 端口。不幸的结果是文档是 C++,如果您的语言是 Python 和 JavaScript,则不适合阅读。

我有 documentation for Ammo.btCompoundShape here 但无法理解。

在这里一个工作代码,其中 Bone 实例刚好从地板上掉下来,你会看到。不用担心“骨头”的命名,在这个开发阶段只是为了测试两个块的复合形状。

class RenderEngine {
  constructor(gameEngine) {
    this.gameEngine = gameEngine
    this.gameEngine.clock = new THREE.Clock();
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(0xbfd1e5);
    this.camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,0.2,5000);
    this.camera.position.set(0,30,70);
    this.camera.lookAt(new THREE.Vector3(0,0));
    const hemiLight = new THREE.HemisphereLight(0xffffff,0xffffff,0.1);
    hemiLight.color.setHSL(0.6,0.6,0.6);
    hemiLight.groundColor.setHSL(0.1,1,0.4);
    hemiLight.position.set(0,50,0);
    this.scene.add(hemiLight);
    const dirLight = new THREE.DirectionalLight(0xffffff,1);
    dirLight.color.setHSL(0.1,0.95);
    dirLight.position.set(-1,1.75,1);
    dirLight.position.multiplyScalar(100);
    this.scene.add(dirLight);
    dirLight.castShadow = true;
    dirLight.shadow.mapSize.width = 2048;
    dirLight.shadow.mapSize.height = 2048;
    const d = 50;
    dirLight.shadow.camera.left = -d;
    dirLight.shadow.camera.right = d;
    dirLight.shadow.camera.top = d;
    dirLight.shadow.camera.bottom = -d;
    dirLight.shadow.camera.far = 13500;
    this.renderer = new THREE.Webglrenderer({
      antialias: true
    });
    this.renderer.setClearColor(0xbfd1e5);
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(this.renderer.domElement);
    this.renderer.shadowMap.enabled = true;
  }
  renderFrame() {
    this.renderer.render(this.scene,this.camera)
  }
}

class PhysicsEngine {
  constructor(gameEngine,physicsEngine) {
    this.gameEngine = gameEngine
    let collisionConfiguration = new Ammo.btDefaultCollisionConfiguration(),dispatcher = new Ammo.btCollisiondispatcher(collisionConfiguration),overlappingPairCache = new Ammo.btDbvtbroadphase(),solver = new Ammo.btSequentialImpulseConstraintSolver();
    this.tmpTrans = new Ammo.btTransform();
    this.physicsWorld = new Ammo.btdiscreteDynamicsWorld(dispatcher,overlappingPairCache,solver,collisionConfiguration);
    this.physicsWorld.setGravity(new Ammo.btVector3(0,-10,0));
  }
  updateFrame() {
    this.physicsWorld.stepSimulation(this.gameEngine.clock.getDelta(),10);
    this.gameEngine.objects.forEach(object => {
      const ms = object.ammo.getMotionState()
      if (ms) {
        ms.getWorldTransform(this.tmpTrans)
        const p = this.tmpTrans.getorigin()
        const q = this.tmpTrans.getRotation()
        object.mesh.position.set(p.x(),p.y(),p.z())
        object.mesh.quaternion.set(q.x(),q.y(),q.z(),q.w())
      }
    })
  }
}

class GameEngine {
  constructor(renderEngine,physicsEngine) {
    this.objects = []
    this.renderEngine = new RenderEngine(this,renderEngine)
    this.physicsEngine = new PhysicsEngine(this,physicsEngine)
  }
  run() {
    this.physicsEngine.updateFrame()
    this.renderEngine.renderFrame()
    requestAnimationFrame(() => {
      this.run()
    });
  }
  add(object) {
    this.objects.push(object)
    return this.objects.length - 1
  }
  remove(objectIndex) {
    this.objects[objectIndex] = false
  }
}

class Box {
  constructor(gameEngine,properties) {
    this.gameEngine = gameEngine
    this._initPhysics_(properties)
    this._initRendering_(properties)
    this.id = gameEngine.add(this)
  }
  _initPhysics_(properties) {
    const pos = properties.pos
    const quat = properties.quat
    const scale = properties.scale
    const mass = properties.mass
    const group = properties.group
    const interactionGroup = properties.interactionGroup
    const physicsWorld = this.gameEngine.physicsEngine.physicsWorld
    const transform = new Ammo.btTransform()
    transform.setIdentity()
    transform.setorigin(new Ammo.btVector3(pos.x,pos.y,pos.z))
    transform.setRotation(new Ammo.btQuaternion(quat.x,quat.y,quat.z,quat.w))
    const motionState = new Ammo.btDefaultMotionState(transform)
    const colShape = new Ammo.btBoxShape(new Ammo.btVector3(scale.x * 0.5,scale.y * 0.5,scale.z * 0.5))
    colShape.setMargin(0.05)
    const localInertia = new Ammo.btVector3(0,0)
    colShape.calculateLocalInertia(mass,localInertia)
    const rbInfo = new Ammo.btRigidBodyConstructionInfo(mass,motionState,colShape,localInertia)
    const body = new Ammo.btRigidBody(rbInfo)
    physicsWorld.addRigidBody(body,group,interactionGroup)
    this.ammo = body
  }
  _initRendering_(properties) {
    const pos = properties.pos
    const scale = properties.scale
    const color = properties.color
    this.mesh = new THREE.Mesh(new THREE.BoxBufferGeometry(),new THREE.MeshphongMaterial({
      color
    }))
    this.mesh.position.set(pos.x,pos.z)
    this.mesh.scale.set(scale.x,scale.y,scale.z)
    this.mesh.castShadow = true
    this.mesh.receiveShadow = true
    this.gameEngine.renderEngine.scene.add(this.mesh)
  }
}


class Bone {
  constructor(gameEngine,properties) {
    this.gameEngine = gameEngine
    this._initPhysics_(properties)
    this._initRendering_(properties)
    this.id = gameEngine.add(this)
  }
  _initPhysics_(properties) {
    const pos = properties.pos
    const quat = properties.quat
    const scale = properties.scale
    const mass = properties.mass
    const group = properties.group
    const interactionGroup = properties.interactionGroup
    const physicsWorld = this.gameEngine.physicsEngine.physicsWorld
    const compoundShape = new Ammo.btCompoundShape()
    this._addSection_(compoundShape,{
      pos,quat,scale,offset: {
        x: 0,y: 0,z: 0
      },rotation: {
        x: 0,z: 0,w: 0
      }
    })
    this._addSection_(compoundShape,w: 0
      }
    })
    const transform = new Ammo.btTransform()
    transform.setIdentity()
    transform.setorigin(new Ammo.btVector3(pos.x,quat.w))
    const motionState = new Ammo.btDefaultMotionState(transform)
    compoundShape.setMargin(0.05)
    const localInertia = new Ammo.btVector3(0,0)
    compoundShape.calculateLocalInertia(mass,compoundShape,scale.z)
    this.mesh.castShadow = true
    this.mesh.receiveShadow = true
    this.gameEngine.renderEngine.scene.add(this.mesh)
  }
  _addSection_(compoundShape,properties) {
    const pos = properties.pos
    const quat = properties.quat
    const scale = properties.scale
    const offset = properties.offset
    const rotation = properties.rotation
    const transform = new Ammo.btTransform()
    transform.setIdentity()
    transform.setorigin(new Ammo.btVector3(pos.x + offset.x,pos.y + offset.y,pos.z + offset.z))
    transform.setRotation(new Ammo.btQuaternion(quat.x + rotation.x,quat.y + rotation.y,quat.z + rotation.z,quat.w + rotation.w))
    const motionState = new Ammo.btDefaultMotionState(transform)
    const colShape = new Ammo.btBoxShape(new Ammo.btVector3(scale.x * 0.5,scale.z * 0.5))
    compoundShape.addChildShape(transform,colShape)
  }
}

Ammo().then((Ammo) => {
  const gameEngine = new GameEngine(THREE,Ammo)
  const plane = new Box(gameEngine,{
    pos: {
      x: 0,z: 0
    },quat: {
      x: 0,w: 1
    },scale: {
      x: 50,y: 2,z: 50
    },mass: 0,group: 1,interactionGroup: 1,color: 0xa0afa4
  })
  const Box1 = new Box(gameEngine,y: 5,scale: {
      x: 2,z: 2
    },mass: 1,color: 0xa0afa4
  })
  const Box2 = new Box(gameEngine,{
    pos: {
      x: 0.75,y: 8,z: 0.75
    },color: 0xa0afa4
  })
  const bone1 = new Bone(gameEngine,{
    pos: {
      x: -0.75,y: 10,z: -0.75
    },color: 0xa0afa4
  })
  console.log("gameEngine",gameEngine)
  gameEngine.run()
})
canvas,body,html {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script>
<script src="https://cdn.babylonjs.com/ammo.js"></script>

两个 Box 实例落在地板上 (plane),bone1 落下。我想我在 Ammo.btCompoundShape 上做错了什么。没有错误。正确的做法是什么?

解决方法

bone 实际上并没有完全落下,而是停在了飞机的中间。

原因:您正在转换两次:

  1. motionState 已转换
  2. compoundShape_addSection_
  3. 内再次转换

这样 compoundShape 确实发生碰撞并且不会落下,但是可见的 colShape 被偏移(从 compoundShape 的参考位置)到 plane 内部.

您可以看到,如果您尝试更改 _addSection_ 中的这一行:

transform.setOrigin(new Ammo.btVector3(0,2.0))

解决方案:

不要变换两次。例如。仅变换 motionState,而不变换 compoundShape
例如。删除这两行:

_addSection_(compoundShape,properties) {
    const transform = new Ammo.btTransform()
    transform.setIdentity()
    // -- disable second transform: --
    // transform.setOrigin(new Ammo.btVector3( ... ))
    // transform.setRotation(new Ammo.btQuaternion( ... ))

    const colShape = new Ammo.btBoxShape(new Ammo.btVector3(scale.x * 0.5,scale.y * 0.5,scale.z * 0.5))
    compoundShape.addChildShape(transform,colShape)
}

另一条评论:

localInertia 也应用于两次:

  • compoundShape.calculateLocalInertia(mass,localInertia)
  • const rbInfo = new Ammo.btRigidBodyConstructionInfo(mass,motionState,compoundShape,localInertia)

这显然有效,但可能不是故意的。它不会失败,因为它是 0,0。如果您确实想要两个惯性,我也认为您不能为它们使用相同的 localInertia 对象,但您应该创建第二个对象,例如localInertiaCompoundShape,但我不确定。

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...