Intermediate Tutorial

MeshCollider for a Torus

30 minutes

Posted on: January 9, 2018

Learn Sumerian
MeshCollider for a Torus



In this tutorial you will learn about:

creating a mesh collider

In this tutorial, we create a MeshCollider for a primitive Torus shape. For performance, and by default, we often use other primitive shape colliders, such as Sphere, Box, and Cylinder to approximate the shape of a collision mesh.

However, there are situations in which you want an object to collide with the mesh itself. This tutorial shows you how to create a MeshCollider on a Torus to fall, hit a Sphere, spin off of it from the collision, and hit the table where it will spin, wobble, and settle.

Note: At the time of this writing, the Collider component’s Shape options don’t include the MeshCollider collider type. Therefore, the only way to create a MeshCollider shape is by using code in a Script component.

This is the scene we will build in this tutorial. For best results, be sure you are using the latest version of your browser.


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

Step 1: Create the Shapes

  1. Create a new scene using the Default Lighting template.

  2. From the Create Entity menu, in the 3D Primitives section, choose and then add a Quad. This will be our flat surface.

  3. In the Inspector panel, open the Transform component. Change the X Rotation to -90 and change the Scale to (10, 10, 10).

  4. Feel free to change the color of the Quad (we used a Hex value of 3b2c4c).

  5. Add a Sphere to the scene. Move the Sphere slightly above the Quad, so the Y Translation has a value of about 2.5.

  6. Change the Scale values to (3, 3, 3).

  7. Feel free to change the color of the Sphere (we used a Hex value of 495b44).

  8. Add a Torus to the scene.

  9. Place it above the Sphere using the following Transform values.

Step 2: Add the Sphere and Plane Colliders

Now we have a Torus on which we’ll put a MeshCollider. We’ll collide it with the Sphere and Quad, which will put Sphere and Plane collider shapes on it. Your scene should look something like the image shown at the beginning of this tutorial.

  1. Select the Quad entity. In the Inspector panel, choose + Add Component, and then add a Collider component.

  2. Set the Collider component’s Shape property to Infinite Plane.

  3. Add a Collider component to the Sphere and set the Shape property to Sphere.

Step 3: Add the MeshCollider to the Torus

  1. With the Torus still selected, add a Script component.

  2. Under the Script component, click the + button to create a new script.

  3. Choose Custom from the list that appears.

  4. Click the resulting Script area next to the Instance Of label.

  5. In Details, rename the script to “createMeshCollider”.

  6. Return to the Torus entity’s Inspector panel. In the Script component, choose the edit button (pencil icon) next to the createMeshCollider script.

  7. Choose Edit In Text Editor to open the template script. Replace the setup function with the following.

     function setup(args, ctx) {
          const mesh = ctx.entity.meshDataComponent && ctx.entity.meshDataComponent.meshData;
          if(mesh) {
              // Create Collider component with MeshCollider
              if(!ctx.entity.colliderComponent) {
                 const colliderComponent = new sumerian.ColliderComponent({collider: new sumerian.MeshCollider({meshData: mesh})});
              } else {
                  console.log("Entity already has a ColliderComponent - not adding another");
             // Create RigidBody component
              if(!ctx.entity.rigidBodyComponent) {
                 const rigidBodyComponent = new sumerian.RigidBodyComponent({isKinematic:false});
              } else {
                  console.log("Entity already has a Rigid Body Component, skipping add and initialization.");

Your script in your Text Editor should look like this: