X_ITE X3D Browser
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 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.
X_ITE needs your support. If you become a Patreon, we can improve X_ITE even better, or simply subscribe to receive the latest news.
- Getting Started
- Supported Nodes
- Accessing the External Browser
- DOM Integration
- Custom Shaders
- 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.
jsDelivr is an open-source content delivery network (CDN) renowned for its no-cost access, swift performance, and reliable service.
<script defer src="https://cdn.jsdelivr.net/npm/x_ite@12.1.10/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.10/dist/x_ite.min.mjs"; </script>Info: It is no longer necessary to include the CSS file.
To install, use the following command:
$ npm install x_iteMaybe you are curious now how to use X_ITE with Electron?
Also try 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.
$ npm install x_ite-nodeThis 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.
<script defer src="https://cdn.jsdelivr.net/npm/x_ite@12.1.10/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:
<script type="module"> import X3D from "https://cdn.jsdelivr.net/npm/x_ite@12.1.10/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.
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.
X_ITE is free software and licensed under the MIT License.
- x_ite-node — Pure Node.js version of X_ITE
- x3d-tidy — X3D converter, beautifier and minimizer
- x3d-image — render image files from X3D
- sunrize — a multi-platform X3D editor
