Spline Instances in Hype

[MaxZieb (Loves Hype)]

Simple demo scene with all interactivity disabled, but you can use all interactions if you want!

---

Current attempt of integrating Spline into Hype (thanks to @ionutilie for requesting this). You are welcome to modify and improve: SplineInstance.hype.zip (56,5 KB)
Make sure to update the runtime link in Head HTML if you download this in the future.

Short list of thought and notes

• The runtime uses a module and therefore loads at its own time in the current setup. It is also around 1.4 MB (just so you know what you are getting into when running Spline).
  • Therefore, this current approach waits on the first scene until the runtime is ready (loaded or from cache) and switches the Hype Document to the second scene. Currently, this affects all Hype Documents on page, but can be avoided, by adding a name filter (see Head HTML)
• Spline Instances don't like to be destroyed at random, and that is just what Hype does when switching scenes. I currently don't see a destroy method to unload them in the official API and hence we have to resort to hosting them in a permanent symbol. Seems like Spline doesn't care if its canvas container is moved around in the DOM or invisible, as long as it isn't destroyed.
• Two methods are currently available…
  • hypeDocument.loadSplineIntoRectangle taking an object with at least:
    • url the url of the Spline file
    • selector the selector in the current scene to load the Spline file into
    • onload this is an optional callback that given a function executes and receives the spline instance as first parameter (it currently functions also as a onready on repeat calls as Spline instances are cache by element id in this implementation).
    • init this is an optional callback that is called only once per session, if the Spline is loaded rather than retrieved from cache.
  • hypeDocument.getSplineForRectangle taking a selector
    • selector a selector, a Spline file has been loaded into. If found in the cache it will return the Spline instance, otherwise null

Code example loading a Spline

hypeDocument.loadSplineIntoRectangle({
 	// get this url from the Spline editor
	url: 'https://prod.spline.design/#####/scene.splinecode',
	selector: '.myclass', //or #myid
	
	init: function(spline){
		// optional		
	},
	
	onload: function(spline){
		// optional
	}
});

Code example manipulating a Spline

const spline = hypeDocument.getSplineForRectangle('.myclass'); //or #myid

// act if we have an instance
if (spline) {
	// replace below code with what ever you want todo
	const obj = spline.findObjectByName('Cube');
	
	if (!obj.init_rotation_x) obj.init_rotation_x = obj.rotation.x;
	if (!obj.init_rotation_y) obj.init_rotation_y = obj.rotation.y;
			
	let nullElm = element.closest('.null');
	let rect = nullElm.getBoundingClientRect();
	let x = event.clientX - Math.round(rect.left);
	let y = event.clientY - Math.round(rect.top);

	obj.rotation.x = obj.init_rotation_x + y / 100;
	obj.rotation.y = obj.init_rotation_y + x / 100;
}

Check out the runtime documentation to see what you can do with a Spline instance

[MaxZieb (Loves Hype)]

Simple interactivity demo

SplineInstance_EventListener.hype.zip (28,9 KB)