Javascript Cannon.js+；Three.js：最小汽车&x2B；物理学

我正试图找出如何使用Three.js和Cannon.js创建一辆物理最小的汽车。我已经为我的汽车和车轮创建了基于视觉和物理的元素，我的汽车响应向上箭头和左/右箭头命令加速和转弯：

var container=document.querySelector（'body'），
w=container.clientWidth，
h=容器的重量，
场景=新的三个。场景（），
摄像机=新的三视角摄像机（75，宽/高，0.001100），
renderConfig={antialas:true，alpha:true}，
renderer=new THREE.WebGLRenderer（renderConfig）；
摄像机位置设置（0,1，-10）；
摄像机。注视（0,0,0）；
renderer.setPixelRatio（window.devicePixelRatio）；
渲染器。设置大小（w，h）；
container.appendChild（renderer.domeElement）；
addEventListener（'resize'，function（））{
w=container.clientWidth；
h=容器的重量；
摄像头。纵横比=w/h；
camera.updateProjectMatrix（）；
渲染器。设置大小（w，h）；
})
var几何=新的三个平面几何（10,10,10）；
var material=新的三个.MeshBasicMaterial（{color:0xff0000，side:THREE.DoubleSide}）；
var平面=新的三个网格（几何体、材质）；
平面旋转x=Math.PI/2；
场景。添加（平面）；
var日光=新的三方向光（0xffffff，1.0）；
阳光。位置。设置（-10,10,0）；
场景.添加（阳光）
/**
*物理学
**/
var-world=新的CANNON.world（）；
world.broadphase=新加农炮.SAPBroadphase（世界）；
世界引力集（0，-10,0）；
world.defaultContactMaterial.摩擦力=0；
var地面材料=新加农炮材料（“地面材料”）；
var车轮材料=新加农炮材料（“车轮材料”）；
var wheelGroundContactMaterial=新加农炮。ContactMaterial（车轮材料、地面材料、{
摩擦力：0.3，
归还：0，
接触方程刚度：1000，
});
world.addContactMaterial（wheelGroundContactMaterial）；
//汽车物理车身
var chassisShape=新加农炮.Box（新加农炮.Vec3（1,0.3,2））；
var chassisBody=新加农炮体（{mass:150}）；
chassisBody.addShape（chassisShape）；
chassisBody.position.set（0,0.2,0）；
chassisBody.angularVelocity.set（0,0,0）；//初速度
//汽车视觉车身
var geometry=新的三个.BoxGeometry（2,0.6,4）；//双沟形
var material=new THREE.MeshBasicMaterial（{color:0xffff00，side:THREE.DoubleSide}）；
变量框=新的三个网格（几何体、材质）；
场景。添加（框）；
//父车辆对象
车辆=新加农炮。雷卡斯特车辆({
chassisBody:chassisBody，
indexRightAxis:0，//x
indexUpAxis:1，//y
indexForwardAxis:2，//z
});
//车轮选项
变量选项={
半径：0.3，
方向本地：新加农炮.Vec3（0，-1,0），
悬垂度：45，
悬架剩余长度：0.4，
摩擦滑移：5，
阻尼松弛：2.3，
阻尼压缩：4.5，
最大悬挂力：200000，
影响：0.01，
axleLocal：新加农炮.Vec3（-1,0,0），
chassisConnectionPointLocal:新CANNON.Vec3（1,1,0），
最大悬挂行程：0.25，
自定义滑动旋转速度：-30，
使用自定义滑动旋转速度：true，
};
var axlewidth=0.7；
options.chassisConnectionPointLocal.set（axlewidth，0，-1）；
车辆。添加车轮（选装件）；
options.chassisConnectionPointLocal.set（-axlewidth，0，-1）；
车辆。添加车轮（选装件）；
options.chassisConnectionPointLocal.set（axlewidth，0，1）；
车辆。添加车轮（选装件）；
options.chassisConnectionPointLocal.set（-axlewidth，0，1）；
车辆。添加车轮（选装件）；
车辆。addToWorld（世界）；
//车轮
var Wheelbods=[]，
视觉效果=[]；
车辆.车轮信息.forEach（功能（车轮）{
var形状=新加农炮圆柱（轮.半径，轮.半径，轮.半径/2,20）；
var body=新加农炮。车身（{质量：1，材料：车轮材料}）；
var q=新的CANNON.Quaternion（）；
q、 setFromAxisAngle（新CANNON.Vec3（1,0,0），Math.PI/2）；
body.addShape（shape，new CANNON.Vec3（），q）；
轮体。推（体）；
//车轮可视体
var geometry=新的三个圆柱几何体（wheel.radius，wheel.radius，0.4,32）；
var材质=新的3.0网格材质({
颜色：0xd0901d，
发射：0xaa0000，
三面，双面，
对,，
});
var圆柱体=新的三个网格（几何体、材质）；
车轮视觉。推动（气缸）；
场景.添加（圆柱体）；
});
//更新轮子以匹配物理特性
world.addEventListener（'postStep'，function（）{
对于（var i=0；iAha），当我应该将其应用于几何体时，我正在将hacky旋转应用于网格

下面的答案只为
车辆添加了一行。wheelInfos
循环：

cylinder.geometry.rotateZ(Math.PI/2);


var container=document.querySelector（'body'），
w=container.clientWidth，
h=容器的重量，
场景=新的三个。场景（），
摄像机=新的三视角摄像机（75，宽/高，0.001100），
renderConfig={antialas:true，alpha:true}，
renderer=new THREE.WebGLRenderer（renderConfig）；
摄像机位置设置（0,1，-10）；
摄像机。注视（0,0,0）；
renderer.setPixelRatio（window.devicePixelRatio）；
渲染器。设置大小（w，h）；
container.appendChild（renderer.domeElement）；
addEventListener（'resize'，function（））{
w=container.clientWidth；
h=容器的重量；
摄像头。纵横比=w/h；
camera.updateProjectMatrix（）；
渲染器。设置大小（w，h）；
})
var几何=新的三个平面几何（10,10,10）；
var material=新的三个.MeshBasicMaterial（{color:0xff0000，side:THREE.DoubleSide}）；
var平面=新的三个网格（几何体、材质）；
平面旋转x=Math.PI/2；
场景。添加（平面）；
var日光=新的三方向光（0xffffff，1.0）；
阳光。位置。设置（-10,10,0）；
场景.添加（阳光）
/**
*物理学
**/
var-world=新的CANNON.world（）；
world.broadphase=新加农炮.SAPBroadphase（世界）；
世界引力集（0，-10,0）；
world.defaultContactMaterial.摩擦力=0；
var地面材料=新加农炮材料（“地面材料”）；
var车轮材料=新加农炮材料（“车轮材料”）；
var wheelGroundContactMaterial=新加农炮。ContactMaterial（车轮材料、地面材料、{
摩擦力：0.3，
归还：0，
接触方程刚度