X_ITE X3D 浏览器，以 HTML 格式查看和作 X3D、VRML、glTF 和其他 3D 源。-GLB下载网

X_ITEX3D 浏览器

介绍

X_ITE是一个完全用 JavaScript 编写的综合性 3D 库，并使用 WebGL 进行 3D 渲染。作者可以在 HTML5 页面中在线发布 X3D、VRML、glTF 和其他 3D 文件格式，这些X_ITE无需事先安装插件即可与 Web 浏览器配合使用。由于 X3D 向后兼容，因此 X_ITE 也可以用作 VRML 查看器。

🚀 欲了解更多信息和实时预览，请访问我们的主页。

资金

X_ITE需要您的支持。如果您成为 Patreon，我们可以更好地改进X_ITE，或者只是订阅以接收最新消息。

快速链接

将X_ITE与 CDN 配合使用

使用 CDN 可以通过缓存更靠近用户的内容、分配流量负载以及提供针对攻击的保护来提高网站性能、可靠性和安全性。

如果要在生产环境中使用 X_ITE，则应使用固定版本的 X_ITE。您可以在 npm 上获取所有可用版本的列表。

jsDelivr CDN

jsDelivr 是一个开源内容交付网络（CDN），以其免费访问、快速的性能和可靠的服务而闻名。

<script defer src="https://cdn.jsdelivr.net/npm/x_ite@12.1.2/dist/x_ite.min.js"></script>
<!-- or as ES module for use in scripts -->
<script type="module">
import X3D from "https://cdn.jsdelivr.net/npm/x_ite@12.1.2/dist/x_ite.min.mjs";
</script>

信息：不再需要包含 CSS 文件。

从 NPM 获取

要安装，请使用以下命令：

$ npm install x_ite

也许您现在很好奇如何将X_ITE与 Electron 一起使用？

也可以尝试 x_ite-node，一个纯Node.js版本，不依赖 Electron 或任何浏览器。仅适用于读取 3D 文件、分析、处理和生成 X3D。

$ npm install x_ite-node

用法

此脚本在 HTML 页面中初始化 X3D 画布，将其配置为包含具有默认材质属性的场景、相机和几何立方体。然后，它会对场景中立方体的旋转进行动画处理，确保摄像机捕捉动态动作。

声明性语法

<script defer src="https://cdn.jsdelivr.net/npm/x_ite@12.1.2/dist/x_ite.min.js"></script>
<x3d-canvas update="auto" contentScale="auto">
  <X3D profile='Interchange' version='4.0'>
    <head>
      <unit category='angle' name='degree' conversionFactor='0.017453292519943295'></unit>
    </head>
    <Scene>
      <Viewpoint
          description='Initial View'
          position='2.869677 3.854335 8.769781'
          orientation='-0.7765887 0.6177187 0.1238285 28.9476440862198'></Viewpoint>
      <Transform DEF='Box'
          rotation='0 1 0 0'>
        <Shape>
          <Appearance>
            <Material></Material>
          </Appearance>
          <Box></Box>
        </Shape>
      </Transform>
      <TimeSensor DEF='Timer'
          cycleInterval='10'
          loop='true'></TimeSensor>
      <OrientationInterpolator DEF='Rotor'
          key='0, 0.25, 0.5, 0.75, 1'
          keyValue='0 1 0 0, 0 1 0 90, 0 1 0 180, 0 1 0 270, 0 1 0 0'></OrientationInterpolator>
      <ROUTE fromNode='Timer' fromField='fraction_changed' toNode='Rotor' toField='set_fraction'></ROUTE>
      <ROUTE fromNode='Rotor' fromField='value_changed' toNode='Box' toField='set_rotation'></ROUTE>
    </Scene>
  </X3D>
</x3d-canvas>

纯 JavaScript

也可以使用纯 JavaScript 创建相同的场景：

<script type="module">
import X3D from "https://cdn.jsdelivr.net/npm/x_ite@12.1.2/dist/x_ite.min.mjs";

const
  canvas  = document .createElement ("x3d-canvas"), // Or get an already inserted <x3d-canvas> element.
  browser = canvas .browser,                        // Get X3DBrowser reference.
  scene   = await browser .createScene (browser .getProfile ("Interchange"), browser .getComponent ("Interpolation", 1));

// Append <x3d-canvas> element to body:

document .body .appendChild (canvas);

// Change Browser Options (this could also be done by setting the attributes of the canvas):

browser .setBrowserOption ("AutoUpdate",   true); // Disable animations if <x3d-canvas> is not visible.
browser .setBrowserOption ("ContentScale", -1);   // Increase resolution for HiDPI displays.

// Create Viewpoint:

const viewpointNode = scene .createNode ("Viewpoint");

viewpointNode .set_bind    = true;           // Bind the viewpoint.
viewpointNode .description = "Initial View"; // Appears now in the context menu.
viewpointNode .position    = new X3D .SFVec3f (2.869677, 3.854335, 8.769781);
viewpointNode .orientation = new X3D .SFRotation (-0.7765887, 0.6177187, 0.1238285, 0.5052317);

scene .rootNodes .push (viewpointNode);

// Create Box:

const
  transformNode  = scene .createNode ("Transform"),
  shapeNode      = scene .createNode ("Shape"),
  appearanceNode = scene .createNode ("Appearance"),
  materialNode   = scene .createNode ("Material"),
  boxNode        = scene .createNode ("Box");

appearanceNode .material = materialNode;

shapeNode .appearance = appearanceNode;
shapeNode .geometry   = boxNode;

transformNode .children .push (shapeNode);

scene .rootNodes .push (transformNode);

// Give the node a name if you like.
scene .addNamedNode ("Box", transformNode);

// Create animation:

const
  timeSensorNode   = scene .createNode ("TimeSensor"),
  interpolatorNode = scene .createNode ("OrientationInterpolator");

timeSensorNode .cycleInterval = 10;
timeSensorNode .loop          = true;

for (let i = 0; i < 5; ++ i)
{
  interpolatorNode .key [i]      = i / 4;
  interpolatorNode .keyValue [i] = new X3D .SFRotation (0, 1, 0, Math .PI / 2 * i);
}

scene .rootNodes .push (timeSensorNode, interpolatorNode);

// Add routes:

scene .addRoute (timeSensorNode,   "fraction_changed", interpolatorNode, "set_fraction");
scene .addRoute (interpolatorNode, "value_changed",    transformNode,    "set_rotation");

// Show scene.

await browser .replaceWorld (scene);
</script>

在访问外部浏览器中阅读更多内容。

贡献

随时欢迎贡献。没有特殊的形式可以做到这一点。一个好主意是分叉 X_ITE 存储库并创建一个与分支不同的分支，进行更改，然后发出拉取请求。development

有关更多信息，请参阅贡献。

许可证

X_ITE是免费软件，并根据 MIT 许可证获得许可。

也可以看看

x_ite 节点 — X_ITE 的纯Node.js版本
x3d-tidy — X3D 转换器、美化器和最小化器
x3d-image — 从 X3D 渲染图像文件
sunrize — 多平台 X3D 编辑器

Name
创建3000 修复了拼写错误。 2e5bd68 · 3 days ago
.github 域名	更新 Contributing.md。	5 months ago
.vscode 域名	将“APNG”和“playsinline”添加到 cSpell 单词列表中	3 months ago
建	将分支“开发”合并到 feature/KHR_materials_volume_scatter	last month
区	内部版本 12.1.2	3 days ago
文档	修复了拼写错误。	3 days ago
元	更新的示例。	last year
来源	内部版本 12.1.2	3 days ago
测试	制作了 X3DConstants 接口。	last year
.git属性	添加了 .gitattributes。	last month
.gitignore 域名	更新 .gitignore 以更正 /docs/ssl 目录的格式	3 months ago
LICENSE.md	修复 LICENSE.md 格式以保持一致性和清晰度	6 months ago
README.md	内部版本 12.1.2	3 days ago
SECURITY.md	创建 SECURITY.md	5 months ago
package.json	内部版本 12.1.2	3 days ago
webpack.config.js	使用 const 和 let。	2 months ago
x_ite.min.html	将断字属性添加到主要色彩管理样式中，以获得更好的效果	4 months ago