javascript - 在单个网格对象的单个 ThreeJS 场景中同步多个客户端视角

Question

对 ThreeJS 来说相对较新，真的很想了解以下是否可行，如果可以，如何实现：

• 最初，不同机器上的 2 个 Web 浏览器客户端想要加载相同的基于 html 的场景代码，但从不同的角度查看它
• 客户端 1 想要旋转立方体，客户端 2 应该看到立方体正在旋转
• 客户端 2 想要更新一个面上的立方体网格纹理，客户端 1 应该会看到新纹理。
• 由于“n”个其他客户端也加载了应用程序，他们还希望能够从自己的角度查看相同的网格/更新。

通过阅读有关 ThreeJS 的所有优秀文档，我不清楚您正在做的是为每个客户提供他们可以引用的自己的“相机”对象，这是否意味着提供多个画布、渲染器或者只是巧妙地使用视口......或完全不同的东西......

已经看过一些例子，比如WebGL上的galaxy sim，它是关于视口之间的内容同步等。但我不确定这是同一件事......

任何指针将不胜感激 - 在此先感谢！

标签： javascriptthree.js

Answer 1

这可以完成，但不能单独使用 Three.js。三个仅在单个客户端中运行，在打开页面的人的浏览器中。与任何 HTML 页面相同。网页工作时，浏览器只需从 Web 服务器下载数据、静态文件并在本地运行，因此不同的用户不会以任何方式相互影响。因此，添加多个摄像头将无济于事，这只会使单个客户端拥有多个摄像头。

要通过网络将更改同步到多个客户端，您必须使用一个服务器，其中 three.js 应用程序从所有客户端连接。对于实时同步，浏览器有 WebSockets，它们通常与 three.js 一起用于这类事情。一个流行的用于套接字编程的 JS 库是 socket.io，https ://socket.io/ 。当你用谷歌搜索时，有关于使用 socket.io for three.js 的信息，https://www.google.com/search? q=three.js+socket.io