10.5.9 • Published 9 months ago

x_ite v10.5.9

Weekly downloads
4
License
GPL-3.0
Repository
github
Last release
9 months ago

X_ITE X3D Browser

npm Version Build Size jsDelivr Hits npm Downloads DeepScan grade

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 glTF and VRML viewer and for other 3D file formats.

šŸš€ For more information and a live preview, please visit our home page.

Funding

X_ITE needs your support. If you become a Patreon, we can improve X_ITE even better.

Quick Links

Using X_ITE with a CDN

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 CDN

jsDelivr is an open-source content delivery network (CDN) renowned for its no-cost access, swift performance, and reliable service.

<script src="https://cdn.jsdelivr.net/npm/x_ite@10.5.9/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@10.5.9/dist/x_ite.min.mjs";
</script>

Info: It is no longer necessary to include the CSS file.

Get it from NPM

To install, use the following command:

$ npm install x_ite

Maybe you are curious now how to use X_ITE with Electron?

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@10.5.9/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@10.5.9/dist/x_ite.min.mjs";

const
   browser = X3D .getBrowser (),
   scene   = browser .currentScene;

scene .setProfile (browser .getProfile ("Interchange"));
scene .addComponent (browser .getComponent ("Interpolation", 1));

await browser .loadComponents (scene);

// 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>

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

  • x3d-tidy — X3D converter, beautifier and minimizer
  • x3d-image — render image files from X3D
  • sunrize — a multi-platform X3D editor
10.5.9

9 months ago

10.4.1

11 months ago

10.4.2

11 months ago

10.4.0

11 months ago

10.5.0

11 months ago

10.5.1

11 months ago

10.5.2

10 months ago

10.5.3

10 months ago

10.5.4

10 months ago

10.5.5

10 months ago

10.5.6

10 months ago

10.5.7

10 months ago

10.5.8

9 months ago

10.0.5

1 year ago

10.0.0

1 year ago

10.0.1

1 year ago

10.0.2

1 year ago

10.0.3

1 year ago

10.0.4

1 year ago

10.3.0

11 months ago

10.3.1

11 months ago

9.6.3

1 year ago

10.2.0

12 months ago

9.7.0

1 year ago

10.1.0

12 months ago

9.6.2

1 year ago

9.6.1

1 year ago

9.6.0

1 year ago

9.5.2

1 year ago

9.5.1

1 year ago

9.5.0

1 year ago

9.4.5

1 year ago

9.4.4

1 year ago

9.4.3

1 year ago

9.4.2

1 year ago

9.4.1

1 year ago

9.4.0

1 year ago

9.3.2

1 year ago

9.3.1

1 year ago

9.3.0

1 year ago

9.2.7

1 year ago

9.2.6

1 year ago

9.2.5

1 year ago

9.2.4

1 year ago

9.2.3

1 year ago

9.2.2

1 year ago

9.2.1

2 years ago

9.2.0

2 years ago

9.1.11

2 years ago

9.1.10

2 years ago

9.1.9

2 years ago

9.0.3

2 years ago

9.1.8

2 years ago

9.1.7

2 years ago

9.1.6

2 years ago

9.1.5

2 years ago

9.1.4

2 years ago

9.1.3

2 years ago

9.1.2

2 years ago

9.0.2

2 years ago

9.0.1

2 years ago

9.0.0

2 years ago

9.1.1

2 years ago

9.1.0

2 years ago

8.11.1

2 years ago

8.11.0

2 years ago

8.11.3

2 years ago

8.11.2

2 years ago

8.11.5

2 years ago

8.11.4

2 years ago

8.11.7

2 years ago

8.11.6

2 years ago

8.11.13

2 years ago

8.11.14

2 years ago

8.11.11

2 years ago

8.11.12

2 years ago

8.11.17

2 years ago

8.11.15

2 years ago

8.11.16

2 years ago

8.11.10

2 years ago

8.11.9

2 years ago

8.11.8

2 years ago

8.12.0

2 years ago

8.12.2

2 years ago

8.12.1

2 years ago

8.12.4

2 years ago

8.12.3

2 years ago

8.12.5

2 years ago

8.7.9

2 years ago

8.7.6

2 years ago

8.7.8

2 years ago

8.7.7

2 years ago

8.8.1

2 years ago

8.8.0

2 years ago

8.8.3

2 years ago

8.8.2

2 years ago

8.8.5

2 years ago

8.8.4

2 years ago

8.8.7

2 years ago

8.8.6

2 years ago

8.10.0

2 years ago

8.10.1

2 years ago

8.9.0

2 years ago

8.9.2

2 years ago

8.9.1

2 years ago

8.9.4

2 years ago

8.9.3

2 years ago

8.9.6

2 years ago

8.9.5

2 years ago

8.6.12

2 years ago

8.6.11

2 years ago

8.6.10

2 years ago

8.6.3

2 years ago

8.6.2

2 years ago

8.6.5

2 years ago

8.6.4

2 years ago

8.6.1

2 years ago

8.6.0

2 years ago

8.6.19

2 years ago

8.6.18

2 years ago

8.6.17

2 years ago

8.6.16

2 years ago

8.6.7

2 years ago

8.6.15

2 years ago

8.6.6

2 years ago

8.6.14

2 years ago

8.6.9

2 years ago

8.6.13

2 years ago

8.6.8

2 years ago

8.6.23

2 years ago

8.6.22

2 years ago

8.6.20

2 years ago

8.6.24

2 years ago

8.7.2

2 years ago

8.5.4

2 years ago

8.7.1

2 years ago

8.5.3

2 years ago

8.7.4

2 years ago

8.7.3

2 years ago

8.5.5

2 years ago

8.5.0

3 years ago

8.7.0

2 years ago

8.7.5

2 years ago

6.1.0

3 years ago

6.0.0

3 years ago

8.4.1

3 years ago

8.3.2

3 years ago

8.4.0

3 years ago

8.3.1

3 years ago

8.4.3

3 years ago

8.4.2

3 years ago

8.3.3

3 years ago

8.1.0

3 years ago

8.0.0

3 years ago

8.3.0

3 years ago

5.0.3

3 years ago

5.0.2

3 years ago

5.0.0

3 years ago

4.7.9

3 years ago

4.7.6

4 years ago

4.7.5

4 years ago

4.7.8

3 years ago

4.7.7

3 years ago

4.7.12

3 years ago

4.7.10

3 years ago

4.7.11

3 years ago

4.7.14

3 years ago

4.7.15

3 years ago

4.6.8

6 years ago

4.2.17

6 years ago

4.0.7-a

8 years ago

4.0.5

8 years ago

4.0.2

8 years ago