@splinetool/runtime

What is @splinetool/runtime?

@splinetool/runtime is an npm package that allows developers to integrate and manipulate 3D scenes created with Spline, a 3D design tool, directly within their web applications. It provides a runtime environment to load, render, and interact with 3D models and scenes.

What are @splinetool/runtime's main functionalities?

Loading a Spline Scene

This feature allows you to load a Spline scene into your web application. You can specify the path to your Spline file, and the scene will be loaded and ready for rendering.

const Spline = require('@splinetool/runtime');
const scene = new Spline.Scene();
scene.load('path/to/your/spline-file.splinecode');

Rendering the Scene

This feature enables you to render the loaded Spline scene onto a specified HTML canvas element. The renderer takes care of displaying the 3D content in the browser.

const canvas = document.getElementById('myCanvas');
const renderer = new Spline.Renderer({ canvas });
renderer.render(scene);

Interacting with the Scene

This feature allows you to add interactivity to your Spline scene. You can listen for events such as clicks and respond accordingly, making your 3D content interactive.

scene.on('click', (event) => {
  console.log('Object clicked:', event.object);
});

Other packages similar to @splinetool/runtime

three

Three.js is a popular JavaScript library for creating and displaying 3D graphics in the browser. It provides a wide range of features for rendering 3D scenes, including support for WebGL, shaders, and various geometries. Compared to @splinetool/runtime, Three.js offers more low-level control and flexibility but requires more effort to set up and manage 3D scenes.

babylonjs

Babylon.js is a powerful, open-source 3D engine that allows developers to create stunning 3D experiences in the browser. It offers a comprehensive set of features, including a physics engine, particle systems, and support for various 3D formats. Babylon.js is similar to Three.js in terms of capabilities but provides a more extensive set of tools and utilities for building complex 3D applications.

aframe

A-Frame is a web framework for building virtual reality (VR) experiences. It is built on top of Three.js and provides an easy-to-use, declarative syntax for creating 3D and VR content. A-Frame is particularly well-suited for VR applications and offers a higher-level abstraction compared to Three.js and Babylon.js, making it easier to get started with 3D development.

README

Runtime

The code for the smaller spline build needed only to run the HTML export.