janusweb

<p align="center"><a href="https://web.janusvr.com" target="_blank"><img width="480" alt="JanusWeb" src="https://imgur.com/ejvyphR.jpg"></a></p> <p align="center"><b>用于构建社交虚拟现实体验的网络框架。</b></p> <div align="center"> <a href="https://janusvr.com">网站</a> — <a href="https://vesta.janusvr.com">Vesta</a> — <a href="https://github.com/janusvr/janusvr-examples">示例</a> — <a href="https://web.janusvr.com">演示</a> — <a href="https://github.com/madjin/janus-guide">文档</a> </div>

示例

特性

使用HTML和JS为桌面、移动和VR设备构建沉浸式3D环境
通过Three.js / WebGL提供渲染功能
通过WebVR API支持Oculus Rift、Vive、GearVR、Daydream和Cardboard
通过内置网络实现所有设备的实时协作
导入Collada、OBJ、glTF和其他流行的3D文件格式
3D定位音频
通过HTML5 Gamepad API支持游戏手柄
支持Leap Motion、Oculus Touch和Vive控制器等手部追踪设备
使用HTML5视频支持2D、sbs3d/ou3d和360度视频纹理
可脚本化的客户端支持多种自定义用途

使用方法

根据您希望对整个系统的控制程度，可以通过几种不同的方式使用JanusWeb。

使用我们的查看器

我们的默认查看器始终可在https://web.janusvr.com/上使用。您可以编写一个包含[JanusVR标记](https://janusvr.com/docs/build/introtojml/index.html)的HTML页面，并将其托管在任何通常用于托管静态网站的地方。任何常规的网络主机、AWS S3静态站点、CDN，甚至更奇特的位置如IPFS分布式文件系统都可以使用。您甚至可以将标记放在PasteBin或PiratePad等网站上。然后只需在我们的查看器中通过在导航栏中输入URL来加载该URL，您就可以直接链接到它，在社交媒体上分享，或将我们的查看器直接嵌入其他网页、博客文章或文章中。

另请参阅下面的使用特定版本的JanusWeb。

将我们的脚本引入您的页面

使用上述方法，所有链接都会通过我们的服务器。如果您更愿意链接到自己的服务器，可以将我们的JS引入您的页面，并通过其API将JanusWeb用作可脚本化的客户端。这看起来像这样：

<html>
  <head>
    <title>我的JanusVR房间</title>
  </head>
  <body>
    <script src="https://web.janusvr.com/janusweb.js"></script>
    <janus-viewer>
      <FireBoxRoom>
        <Room use_local_asset="room1">
          <Object id="cube" pos="0 1 5" />
          <Text col="1 0 0" pos="0 2 4">我的第一个房间</Text>
        </Room>
      </FireBoxRoom>
    </janus-viewer>
  </body>
</html>

elation.janusweb.init()函数可以接受多个参数，并返回一个promise，该promise接收客户端的实例。可以通过其API控制此客户端引用。请参阅下面的参数和脚本编写部分。

另请参阅下面的使用特定版本的JanusWeb。

从ZIP安装

（待完成 - 我们将在发布v1.0后开始提供JanusWeb的zip版本）

从NPM安装

（待完成 - 我们将在发布v1.0后开始提供JanusWeb的官方NPM包）

npm install janusweb

从源代码构建

如果您想从源代码构建JanusWeb，可以从Github上检出并按照以下步骤进行构建：

$ git clone https://github.com/jbaicoianu/janusweb
$ cd janusweb
$ npm install --only=prod
$ npm run build

这将在您的build/目录中提供最新版本JanusWeb的完整构建。然后您可以根据需要修改build/index.html，并按上述建议进行托管。

参数

JanusWeb在初始化时支持几个参数来控制其行为。

<table> <tr><th> 名称 </th><th> 描述 </th><th> 默认值 </th></tr> <tr><td> autoload </td><td> 默认加载URL或等待脚本 </td><td> true </td></tr> <tr><td> crosshair </td><td> 显示玩家准星 </td><td> true </td></tr> <tr><td> homepage </td><td> 用户按下主页按钮时默认跳转的页面 </td><td> https://web.janusvr.com/ </td></tr> <tr><td> networking </td><td> 启用网络功能 </td><td> true </td></tr> <tr><td> picking </td><td> 启用鼠标交互 </td><td> true </td></tr> <tr><td> resolution </td><td> 如果指定，将渲染器限制为指定大小 </td><td> (无) </td></tr> <tr><td> server </td><td> 要连接的存在服务器 </td><td> wss://presence.janusvr.com:5567/</td></tr> <tr><td> shownavigation </td><td> 控制导航栏的可见性 </td><td> true </td></tr> <tr><td> showchat </td><td> 控制聊天的可见性 </td><td> true </td></tr> <tr><td> stats </td><td> 启用渲染性能统计 </td><td> false </td></tr> <tr><td> url </td><td> 默认加载的页面 </td><td> (homepage) </td></tr> <tr><td> urltemplate </td><td> 生成URL的可选模板 </td><td> (无) </td></tr> <tr><td> useWebVRPolyfill </td><td> 启用WebVR polyfill以兼容移动电话 </td><td> true </td></tr> <tr><td> usevoip </td><td> 启用或禁用VOIP功能 (注意 - 由于浏览器尚不支持通过WebAudio 使用Opus，目前已禁用) </td><td> false </td></tr> </table>

脚本编写

初始化客户端后，elation.janusweb.init()返回一个Promise，该Promise提供对客户端的引用。您可以通过编程控制此客户端来执行各种操作。例如，我们可以让客户端加载一个URL，等待世界及其所有资产加载完成，然后在指定延迟后对世界进行截图：

var pageinfo = elation.utils.parseURL(document.location.href),
    urlargs = pageinfo.args || {},
    hashargs = pageinfo.hash || {};

var url = elation.utils.any(hashargs.url, urlargs.url, 'http://www.janusvr.com/index.html'),
    delay = elation.utils.any(hashargs.delay, urlargs.delay, 1000);

elation.janusweb.init({
  url: url,
  resolution: '1920x1080',
  showchat: false,
  shownavigation: false
}).then(function(client) {
  elation.events.add(client.janusweb.currentroom, 'room_load_complete', function() {
    setTimeout(function() {
      client.hideMenu();
      client.screenshot().then(function(imagefile) {
        // 通过XHR上传imagefile到某处
        console.log('截图完成！');
      });
    }, delay);
  });
});

JanusWeb客户端的许多其他方面也可以通过这种方式进行控制。我们的用户总是在想出使用JanusWeb客户端的新颖和创新方法。将它嵌入到你的博客文章中，用它在你的2D网页背后渲染3D内容，在你的虚拟世界中放置一个虚拟安全摄像头，并从任何网络浏览器查看虚拟世界的实时流。通过网络界面控制虚拟世界。这是你可以随心所欲使用的可编程实时元宇宙门户。可能性是无限的！

你甚至可以在NodeJS中运行JanusWeb进行无头服务器端操作。用它来编写一个在元宇宙中漫游的机器人，或者在服务器上运行你的游戏逻辑和物理引擎，为你的世界提供一个权威的状态来源。如果你对此感兴趣，请告诉我们，我们很乐意帮助你完成这个过程（目前这一切都处于实验阶段！）