Boxshot 3D Packaging Mockup Software
Download Download Download
Download for Windows Download for Mac Download for Mac Dropdown arrow

Non-interactive Scenes

When you open the exported scene in browser, you can then click its parts, zoom and rotate it with your mouse. The scene is interactive and after all that is the main reason to use Koru - to export interactive 3D models.

However, sometimes you don’t really need that interactivity. For instance, you may use Koru for a background scene that should just play an idle animation and ignore mouse clicks. Or you may want to scroll the page below a large Koru scene so it doesn’t steal the mouse cursor while you scroll. This tutorial shows how to do this.

The Problem

Make a simple scene and export it to a single HTML file. Open that file in HTML editor and add some paragraphs of text before and after the <div class=“parent”> exported by Koru. The goal is to make the page long, so you can scroll it in the browser. Then save the file, open it in browser and try scrolling it with your mouse wheel. You will notice that once the mouse cursor gets on the scene, your scrolling zooms the camera instead of actually scrolling the page.

Interactivity Flag

Unfortunately, HTML doesn’t provide a simple solution to the problem. Some web apps let you zoom by holding a modifier key (like control or shift), other do both scrolling and zooming, many just ignore the problem completely.

We decided to add a flag that clearly tells whether the scene should be interactive or not. If the scene is interactive, it steals the scrolling wheel once the mouse is above the scene. Otherwise it ignores touches, clicks and so on.

Switch back to the HTML editor and scroll down to the javascript section where the koruCreate() function is declared. Right above it add the following code:

function koruInit(koru) {
	koru.interactive = false;
}

If you have a more complex template, you may already have that function declared somewhere. In that case simply add that single line assignment to the existing function.

Save the file and reload the page in browser. Scroll the page down and notice that the scene does not steal the mouse anymore. It doesn’t react to clicks and basically does nothing. This may look useless, but once you have some kind of idle animation configured, this might work quite well for background art.

Activation by Click

You can further extend this by making the scene interactive again with a single click. You don’t really need any new API from Koru for that. The idea is simple: you have that interactive flag set to false and you need to set it back to true with a click. How to do that? Let’s add a <div> on top of our scene and add a click handler to that <div> that makes the scene interactive. Simple!

You need to make some changes to the code in order to implement this. First of all, let’s modify the Koru <div> block so it looks this way:

<div class="parent">
	<div class="koru-viewport" id="my-koru">
		<div class="block" id="koru-lock" onclick="koruUnlock()">
		</div>
	</div>
</div>

Your Koru block may look slighly different, depenging on the template, but the main idea is that we add an inner DIV of class block with id and javascript click handler. We also add id attribute to the Koru DIV, so we can easily find it later.

The next change should be done to the <style> section of the HTML file, where you declare a style for the block class:

.block {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 100;
}

This style makes sure the block covers the whole parent element (Koru scene) and that it is on top of it, not below. You can temporary add something like “background: red;” to see that the DIV is actually there, as otherwise it is transparent.

Finally, scroll the HTML code down to the koruInit() function you created and add another function right before or after koruInit():

function koruUnlock() {
	var koru = document.getElementById("my-koru").koru;
	koru.interactive = true;
	var lock = document.getElementById("koru-lock");
	koru.viewport.removeChild(lock);
}

This function is called when you click the blocking DIV (as it is mentioned in its onclick attribute). The function locates the Koru object by using the id attribute you added, it makes the scene interactive and finally removes the blocking DIV so it doesn’t affect the interaction.

You can even remove koruInit() function that locks the scene and remove unlocking from the koruUnlock() function as the blocking DIV does the job by itself, as it covers the scene.

This tutorials just shows some ideas that you can use to temporary disable or enable interactivity of Koru scenes. Using some extra HTML, CSS and Javascript code.

Make it a Template

You’ve made quite a lot changes to the exported file and these changes will be lost if you re-export the file again. It might be a good idea to make template out of it, so it keeps all the changes you need and lets you export the scene again and again without losing a bit.

See here for more details on how to make a template.

That’s All!

As you may see, Koru is not just a simple WebGL exporting software. Instead, it is a platform that you can configure to make quite complex projects.