Easy Display 3D Models in HTML

Holger Seelig — Thu, 30 Jan 2025 12:06:26 +0000

Bringing 3D to the web has never been easier! The X_ITE X3D Browser is revolutionizing the way developers and designers integrate 3D models directly into HTML. With full support for the X3D, VRML and glTF standards, this powerful tool enables seamless rendering of interactive 3D graphics without the need for plugins or complex coding.

Whether you’re building visualizations, educational tools, or immersive experiences, X_ITE offers a lightweight, JavaScript-powered solution that runs smoothly in all modern web browsers. Just embed your X3D models like regular HTML elements, and watch them come to life!

The following lines will create a rotating box:

<script defer 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>

Discover how simple it is to bring your 3D content to the web. Try X_ITE today and experience the future of interactive graphics!

For more information, visit X_ITE Website.

DEV Community: Holger Seelig

Easy Display 3D Models in HTML