ThreeJS、Websockets 和 NodeJS 客户端/服务器实验

Question

我正在玩弄 socket.io、ThreeJS、Javascript 和 NodeJS，以使用 ThreeJS 的图形创建一个简单的客户端/服务器。我不确定所有这些框架是否可以一起工作，但我决定试一试，因为我之前在网上看到过类似的例子，尽管我找不到一个简单的例子来剖析或试验。这主要是为了进行实验，但我也想制作一个小型概念游戏来证明我到目前为止所学到的东西。

我在这里发布了我的代码：https://gist.github.com/netsider/63c414d83bd806b4e7eb

对不起，如果有点不整洁，但我已尽力使其尽可能可读。

基本上，现在服务器端 NodeJS 脚本似乎运行良好（使用“node server-alpha.js”运行）和客户端脚本（client-alpha.html，您可以在浏览器中打开）连接到服务器，并显示用户列表（也已连接）。然而，我的意图是让每个用户都能够移动他/她自己的立方体，现在每个立方体只被添加到屏幕上（而不是被添加、减去，然后再次添加 - 给出移动的错觉)。如果您运行两段代码并连接一两个用户并为每个用户移动箭头键几次，您就会明白我在说什么。

谁能帮我解决这个问题？我尝试了几种不同的方法来移除立方体（并记得在每次之后调用render（））......但我尝试的一切似乎都没有奏效。它总是导致立方体只是被添加到屏幕上，而不是被减去。

我在代码中添加了 cmets 以使事情变得更容易，因为我知道这是相当多的代码（如果它不是你自己的，无论如何）。

谢谢，任何帮助将不胜感激......因为我真的很难让立方体移动。

另外，我在添加 Fly-Controls 时遇到了麻烦（FlyControls.js - 它被注释掉了 ATM），所以如果有人能告诉我哪里出错了，我也将不胜感激。

Answer 1

好的，所以你不想继续重新制作立方体，你需要做的就是改变位置。

同样在游戏开发中，使用面向对象设计几乎是一种要求，解决这个问题的一个好方法是制作一个玩家对象，所以..

CPlayerList = new Array(); // an array of player objects

function ClientPlayer()
{
    this.Cube;
    this.Name = "unnamed";
    this.Id = 0;

    this.Create = function(name,pos,id)
    {
        this.Name = name;
        this.Id = id;

        var cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 'red', transparent:false, opacity:1.0});

        this.Cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

	this.Cube.position.x = pos.x;
        this.Cube.position.y = pos.y;
        this.Cube.position.z = 20; // don't know why this is 20, remember y axis is up & down in opengl/threejs
	    
        scene.add(this.Cube);
    }
    
    this.Move = function(vector)
    {
        this.Cube.position.set(this.Cube.position.x + vector.x, this.Cube.position.y + vector.y, 20);
    }
}

因此，在服务器上，您需要一个包含类似数据的 ServerPlayer 对象，并在将它们发送给客户端之前在服务器上分配 id。所以当你把它发送到你想创建一个新的ClientPlayer的客户端时，调用player.Create()然后把它推送到CPlayerList，像这样：

function newCPlayer(data)
{
    var newPly = new ClientPlayer();
    newPly.Create(data.name,data.pos,data.id);
    CPlayerList.push(newPly);
}

然后当你调用你的 movePlayer() 函数时，你可以简单地遍历你的玩家数组

function movePlayer(keyStroke, clientID)
{
    if (keyStroke == 39) 
    {
        CPlayerList.forEach(function(player,i,a)
        {
            if(player.Id === clientID)
            {
               player.Move(new THREE.Vector3(1,0,0));
            }
        }
    }
}

这只是客户端代码，但这应该可以帮助您入门，如果您有任何不清楚的地方，请告诉我。

还有一个使用类似设计的游戏示例：http://82.199.155.77:3000/（在 chrome 中按 ctrl+shift+j 查看客户端源代码）和服务器代码：http://pastebin.com/PRPaimG9