DEV Community

Holger Seelig
Holger Seelig

Posted on

Easy Display 3D Models in HTML

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.

Web3D Logo Animation

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)