x_ite
Version:
X_ITE X3D Browser, view and manipulate X3D, VRML, glTF and other 3D sources in HTML.
204 lines (142 loc) ā¢ 8.23 kB
Markdown
[](https://www.npmjs.com/package/x_ite)
[](https://bundlephobia.com/package/x_ite)
[](https://www.jsdelivr.com/package/npm/x_ite)
[](https://npmtrends.com/x_ite)
[](https://deepscan.io/dashboard#view=project&tid=23540&pid=26814&bid=855447)
X_ITE is a comprehensive 3D library entirely written in JavaScript and uses WebGL for 3D rendering. Authors can publish X3D, VRML, glTF and [other 3D file formats](https://create3000.github.io/x_ite/#supported-file-formats) online within an HTML5 page with X_ITE that works with web browsers **without** prior plug-in installation. Since X3D is backwardly compatible, X_ITE can also be used as a VRML viewer.
š For more information and a live preview, please visit our [home page](https://create3000.github.io/x_ite/).
X_ITE needs your support. If you become a [Patreon](https://patreon.com/X_ITE), we can improve X_ITE even better, or simply subscribe to receive the latest news.
* [Getting Started](https://create3000.github.io/x_ite/)
* [Supported Nodes](https://create3000.github.io/x_ite/supported-nodes)
* [Accessing the External Browser](https://create3000.github.io/x_ite/accessing-the-external-browser)
* [DOM Integration](https://create3000.github.io/x_ite/dom-integration)
* [Custom Shaders](https://create3000.github.io/x_ite/custom-shaders)
* [glTF Sample Viewer](https://create3000.github.io/x_ite/laboratory/gltf-sample-viewer/)
Using a CDN improves website performance, reliability, and security by caching content closer to users, distributing traffic loads, and providing protection against attacks.
If you are going to use X_ITE in a production environment, you should use a fixed version of X_ITE. You can get a list of all available versions [here on npm](https://www.npmjs.com/package/x_ite?activeTab=versions).
jsDelivr is an open-source content delivery network (CDN) renowned for its no-cost access, swift performance, and reliable service.
```html
<script defer src="https://cdn.jsdelivr.net/npm/x_ite@12.2.3/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.2.3/dist/x_ite.min.mjs";
</script>
```
>**Info:** It is no longer necessary to include the CSS file.
To install, use the following command:
```console
$ npm install x_ite
```
Maybe you are curious now [how to use X_ITE with Electron](https://create3000.github.io/x_ite/how-to-use-x-ite-with-electron)?
Also try [x_ite-node](https://www.npmjs.com/package/x_ite-node), a pure Node.js version, without any dependencies on Electron or any browser. Suitable for just reading 3D files, analyzing, processing and generating X3D.
```console
$ npm install x_ite-node
```
This script initializes an X3D canvas within an HTML page, configuring it to contain a scene, a camera and a geometric cube with default material properties. It then animates the rotation of the cube within the scene, ensuring that the camera captures the dynamic action.
```html
<script defer src="https://cdn.jsdelivr.net/npm/x_ite@12.2.3/dist/x_ite.min.js"></script>
<x3d-canvas contentScale="auto" update="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>
```
The same scene can also be created using pure JavaScript:
```html
<script type="module">
import X3D from "https://cdn.jsdelivr.net/npm/x_ite@12.2.3/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>
```
Read more in [Accessing the External Browser](https://create3000.github.io/x_ite/accessing-the-external-browser/).
Contributions are always welcome. There is no special form to do this. A good idea is to fork the X_ITE repository and create a separate branch from the `development` branch, make your changes and then make a pull request.
For more information see [CONTRIBUTING](.github/CONTRIBUTING.md).
X_ITE is free software and licensed under the [MIT License](LICENSE.md).
* [x_ite-node](https://www.npmjs.com/package/x_ite-node) ā Pure Node.js version of X_ITE
* [x3d-tidy](https://www.npmjs.com/package/x3d-tidy) ā X3D converter, beautifier and minimizer
* [x3d-image](https://www.npmjs.com/package/x3d-image) ā render image files from X3D
* [sunrize](https://www.npmjs.com/package/sunrize) ā a multi-platform X3D editor