Question

我正在使用socket.io，ThreeJS，Javascript和NodeJS来使用ThreeJS的图形创建一个简单的客户端/服务器。我不确定所有这些框架是否能够协同工作，但我决定试一试，因为我之前在网上看过类似的例子，即使我找不到一个简单的解剖或试验。它主要是为了试验，但我也想制作一个小小的概念游戏作为我迄今为止学到的东西的证明。

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

很抱歉，如果它有点不整洁，但我尽力使其尽可能可读。

基本上，现在服务器端NodeJS脚本似乎运行良好（运行＆＃34;节点服务器-α.js＆＃34;）和客户端脚本（client-alpha.html，你可以只是在浏览器中打开）连接到服务器，并显示用户列表（谁也连接）。但是，我的目的是让每个用户能够移动他/她自己的立方体，现在每个立方体只会被添加到屏幕上（而不是被添加，减去，然后再添加 - 以给出运动的幻觉）。如果您运行两段代码并连接一个或两个用户并为每个用户移动箭头键几次，那么您将会看到我正在谈论的内容。

有人可以帮我这个吗？我尝试了几种不同的方法来删除多维数据集（并记住在每次之后调用render（））......但我尝试的所有方法似乎都没有效果。它总是导致立方体被添加到屏幕上，而不会被减去。

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

谢谢，任何帮助都会非常感激...因为我真的不想让立方体移动。

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

Answer 1

好的，所以你不想继续改造立方体，你需要做的只是改变位置。

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

＆＃13;

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);
    }
}

＆＃13;

因此，在服务器上，您需要一个包含类似数据的ServerPlayer对象，并在将服务器发送给客户端之前在服务器上分配ID。因此，当您将其发送到客户端以创建新的ClientPlayer时，请调用player.Create（），然后将其推送到CPlayerList，如下所示：

＆＃13;

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

＆＃13;

然后当你调用你的movePlayer（）函数时，你可以简单地遍历你的玩家阵列

＆＃13;

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));
            }
        }
    }
}

＆＃13;

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

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

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

1 个答案: