x_ite v9.6.0
X_ITE ā X_ITE X3D Browser
Introduction
X_ITE is a robust X3D JavaScript WebGL browser that is compatible with all major web browsers and can be used as a full standard X3D browser as well as a VRML viewer.
š For more information and a live preview, please visit our home page.
Quick Links
jsDelivr CDN
jsDelivr is an open-source content delivery network (CDN) renowned for its no-cost access, swift performance, and reliable service.
Latest Stable Version
If you are a developer or you always wanna be up to date:
<script src="https://cdn.jsdelivr.net/npm/x_ite@latest/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@latest/dist/x_ite.min.mjs";
</script>
Info: It is no longer necessary to include the CSS file.
But consider to use a fixed version if you use X_ITE for production.
Usage
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.
Declarative Syntax
<script src="https://cdn.jsdelivr.net/npm/x_ite@latest/dist/x_ite.min.js"></script>
<x3d-canvas>
<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>
Pure JavaScript
The same scene can also be created using pure JavaScript:
<script type="module">
import X3D from "https://cdn.jsdelivr.net/npm/x_ite@latest/dist/x_ite.min.mjs";
const
browser = X3D .getBrowser (),
scene = browser .currentScene;
// Viewpoint
const viewpointNode = scene .createNode ("Viewpoint");
viewpointNode .set_bind = true;
viewpointNode .description = "Initial View";
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);
// 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);
// 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 * i / 2);
}
scene .rootNodes .push (timeSensorNode, interpolatorNode);
// Routes
scene .addRoute (timeSensorNode, "fraction_changed", interpolatorNode, "set_fraction");
scene .addRoute (interpolatorNode, "value_changed", transformNode, "set_rotation");
</script>
<!-- x3d-canvas element comes here: -->
<x3d-canvas></x3d-canvas>
NPM Usage
To install, use the following command:
$ npm install x_ite
Maybe you are curious now how to use X_ITE with Electron?
Funding
X_ITE needs your support. If you become a Patreon, we can improve X_ITE even better.
License
X_ITE is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License version 3 only, as published by the Free Software Foundation.
See Also
5 days ago
12 days ago
12 days ago
19 days ago
25 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
6 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
6 months ago
6 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
11 months ago
12 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
12 months ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
4 years ago
5 years ago
7 years ago
7 years ago
7 years ago