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)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay