三.js服务器端碰撞检测错误

Question

服务器端对 three.js 的碰撞检测的使用应该与客户端使用不同的原因是什么？我们使用相同的场景和相同的设置客户端和服务器端。

我们正在尝试做的事情是在服务器端确定是否与世界发生冲突。为了简单起见，我们只为我们的世界使用了 2 个盒子。使用的代码取自 Lee Stemkoski 碰撞检测示例（为此我们感谢他 - 它非常出色且清晰）。

客户端代码运行流畅且没有问题，但以完全相同的方式启动的服务器端代码不会检测到冲突。 在我们的演示中，玩家使用他的箭头移动。这个动作被发送到与客户端具有完全相同场景的服务器。然后应用转换（旋转、位置变化等），然后将这些新位置发回。服务器和客户端同步到这里。然而，客户端检测到我们在世界中的对象（2 个盒子）的命中，而服务器没有。

客户端：

socket.on("update", function(data){

var delta = clock.getDelta(); // seconds.
var moveDistance = 200 * delta; // 200 pixels per second
var rotateAngle = Math.PI / 2 * delta;   // pi/2 radians (90 degrees) per second
if( data.type == "rot" ){
  MovingCube.rotation.x = data.x;
  MovingCube.rotation.y = data.y;
  MovingCube.rotation.z = data.z;
}
if( data.type == "pos" ){
  MovingCube.position.x = data.x;
  MovingCube.position.y = data.y;
  MovingCube.position.z = data.z;
}

var originPoint = MovingCube.position.clone();

for (var vertexIndex = 0; vertexIndex < MovingCube.geometry.vertices.length; vertexIndex++){        
  var localVertex = MovingCube.geometry.vertices[vertexIndex].clone();
  var globalVertex = localVertex.applyMatrix4( MovingCube.matrix );
  var directionVector = globalVertex.sub( MovingCube.position );

  var ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
  var collisionResults = ray.intersectObjects( collidableMeshList );
    if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() ) 
      console.log(" Hit ");
    }
})

服务器端代码

socket.on("update", function(data){

  console.log("updating location");
  var delta = 0.1 ;//clock.getDelta(); // seconds.
  var moveDistance = 200 * delta; // 200 pixels per second
  var rotateAngle = Math.PI / 2 * delta;   // pi/2 radians (90 degrees) per second
  if( data == "A" ){
    MovingCube.rotation.y += rotateAngle;
    socket.emit("update",{"type":"rot","x":MovingCube.rotation.x,"y":MovingCube.rotation.y,"z":MovingCube.rotation.z});
  }
  if( data == "D" ){
    MovingCube.rotation.y -= rotateAngle;
    socket.emit("update",{"type":"rot","x":MovingCube.rotation.x,"y":MovingCube.rotation.y,"z":MovingCube.rotation.z});
  }
  if ( data == "left" ){
    MovingCube.position.x -= moveDistance;
    socket.emit("update",{"type":"pos","x":MovingCube.position.x,"y":MovingCube.position.y,"z":MovingCube.position.z});
  }
  if ( data == "right" ){
    MovingCube.position.x += moveDistance;
    socket.emit("update",{"type":"pos","x":MovingCube.position.x,"y":MovingCube.position.y,"z":MovingCube.position.z});
  }
  if ( data == "up" ){
    MovingCube.position.z -= moveDistance;
   socket.emit("update",{"type":"pos","x":MovingCube.position.x,"y":MovingCube.position.y,"z":MovingCube.position.z});
  }
  if ( data == "down" ){
    MovingCube.position.z += moveDistance;
   socket.emit("update",{"type":"pos","x":MovingCube.position.x,"y":MovingCube.position.y,"z":MovingCube.position.z});
  }

  var originPoint = MovingCube.position.clone();

  for (var vertexIndex = 0; vertexIndex < MovingCube.geometry.vertices.length; vertexIndex++){
  var localVertex = MovingCube.geometry.vertices[vertexIndex].clone();
  var globalVertex = localVertex.applyMatrix4( MovingCube.matrix );
  var directionVector = globalVertex.sub( MovingCube.position );
  var ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
  var collisionResults = ray.intersectObjects( collidableMeshList );
  if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() ) 
    console.log(" Hit ");                
  }
})

任何帮助都会很棒。这已经占用了我 2 周的时间，没有错误消息，我无法弄清楚出了什么问题。

Answer 1

浮点计算在不同的机器上会产生不同的结果，让我试着给你找一篇好文章。

给你，Floating point determinism

希望对你有帮助

Answer 2

其实这里真正的问题是你的服务器端代码可能没有从threejs调用渲染循环，（当然会中断）

但是，渲染循环为您做了一些额外的工作，它在每个对象上调用方法 updateMatrixWorld() -

所以服务器端，就在你的光线追踪之前（它使用世界矩阵而不是实际位置） - 一定要调用

your_objects_you_want_to_raytrace.updateMatrixWorld();

在进行实际光线追踪之前。

在你的情况下，MovingCube.updateMatrixWorld();