three.js服务器端冲突检测错误

three.js serverside collision detection error

本文关键字:错误 冲突检测 服务器端 js three      更新时间:2023-09-26

服务器端对three.js冲突检测的使用与客户端的使用有什么不同吗?我们使用相同的场景,具有相同的设置客户端和服务器端。

我们要做的是在服务器端确定是否与世界发生冲突。为了简单起见,我们的世界只使用了两个盒子。所使用的代码取自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 ");                
  }
})

任何帮助都会很棒。这已经消耗了我两周的时间,没有错误消息,我不知道是什么出了问题。

浮点计算可以在不同的机器上产生不同的结果,让我试着为您找到一篇好文章。

给你,浮点决定论

希望它能帮助

实际上,这里真正的问题是您的服务器端代码可能没有从threejs调用渲染循环(这当然会破坏)

然而,渲染循环为您做了一些额外的工作,它对每个对象调用updateMatrixWorld()方法-

因此,在服务器端,在进行光线跟踪(使用世界矩阵而不是实际位置)之前,一定要调用

your_objects_you_want_to_raytrace.updateMatrixWorld();

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

在您的情况下,MovingCube.updateMatrixWorld();