Intermediate Tutorial


HTML Component Interaction


15 minutes

Posted on: October 24, 2017

Tags:

HTML pick
Learn Sumerian
HTML Component Interaction

Tags

HTML
pick

In this tutorial you will learn about:

Getting the name of a clicked entity,

In this tutorial, we demonstrate how to click an entity in a scene and have it affect an HTML entity. We’ll create a scene where HTML will populate in the scene when you click a Primitive entities.

You’ll learn about:

  • Adding a script to the camera
  • HTML
  • Pick
  • SumerianRunner

This is the scene we will build in this tutorial. Click on the various primitive objects to change the HTML. For best results, use the latest version of your browser..

Prerequisites

Before you begin, you should have completed the following tasks and tutorials:

Step 1: Set up the Scene

  1. From the Dashboard, create a scene from the Default Lighting template.

  2. Open the Create Entity menu, and then choose HTML entity.

  3. Open the script editor. Replace the code with the following.

      <p style="background: white; font-size: 18px; padding: 4px; margin: 0;">
         You have selected: <span id='selected'>Nothing</span>
      </p>
    
  4. Notice the id we added for the span element. This enables us to retrieve the element later in the script we make.

Step 2: Create a Script

  1. Add a Sphere, Box, Cone, and Cylinder to the scene.

  2. Spread them out by changing their Translation values.

    There are several ways to highlight the entity that is clicked. In this tutorial, we’ll use the pick method from the SumerianRunner (which is Hardware picking). Then we’ll use a script to implement it.

  3. Select the HTML entity in the hierarchy. In the Inspector panel, choose Add Component. Choose Script. Add a new Custom Script to the Script component.

  4. Open the script for editing, clear out the current code, and paste the following.

      var setup = function(args, ctx){
          // Get the span element from the HTML entity
          var spanElement = document.getElementById('selected');
    
         // Create a click handler function
          ctx.handleClick = function(event){
              var x = event.offsetX;
              var y = event.offsetY;
             ctx.world.sumerianRunner.pick(x, y, function(index, depth){
                  if(index !== -1){
                      var entity = ctx.world.entityManager.getEntityByIndex(index);
                      spanElement.innerHTML = entity.name;
                  } else {
                      spanElement.innerHTML = 'Nothing';
                  }
              });
          };
    
          // Attach the click handler
          ctx.domElement.addEventListener('click', ctx.handleClick);
      }
    
      var cleanup = function(args, ctx){
          // Remove the click handler
          ctx.domElement.removeEventListener('click', ctx.handleClick);
      }
    

    First, this script grabs the selected element from the HTML entity. Then it creates a handleClick function and adds it to the Click Event in the canvas.

Step 3: Understand the Script

The ctx.handleClick click handler is called when there’s a click on the canvas. When this happens, Sumerian executes the code, which does the following:

  1. Calls the world.sumerianRunner.pick function, passing in the mouse position, as well as a callback function.
  2. Inside this callback function, the engine determines if an entity was hit or not.
  3. If an entity was hit, innerHTML changes for the selected element to the name of the entity that was clicked. If there is no hit, it changes to “Nothing”.

Now when you click one of the shapes in the scene, the window tells you which entity you clicked. If you click an empty part of the scene, the window tells you what you clicked: “Nothing”.