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（））……但是我尝试的一切似乎都没有效果。总是导致多维数据集仅被添加到屏幕，而从未被减去。

我在代码中添加了注释，使事情变得容易一些，因为我知道这需要大量代码（如果不是您自己的话）。

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

另外，我在添加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发送给客户端之前在服务器上分配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