How the Spinner demo was made

This article explains in detail how the Spinner demo was created. We cover modelling, animation, materials, and most importantly, Puzzles that make the experience interactive.

About the Spinner demo

Spinner is an example of a simple, yet quite featured 3D web visualization that can be made with Verge3D. It's a perfect app for learning how interactivity should be implemented. It can also be used as a basic mock-up for creating your own 3D web configurators or online presentations.

The demo shows off:

• Realistic physically-based materials
• Immersive environment
• Animation
• Switchable materials: red, yellow, blue
• Audio effects
• Optional e-commerce ordering (when running the app on WordPress/WooCommerce)

Let's explain how the demo was actually made. We use screenshots from Blender to illustrate the asset creation stage, however 3ds Max or Maya won't differ much.

Modelling

The models are quite simple. Provided you have basic modelling skills or premade meshes, you won't meet any troubles.

Since the original model was quite low-poly, and we have a large budget of triangles in our disposal, we used the Subdivision Surface modifier in Blender to improve the quality (in 3ds Max / Maya we used a middle-poly model transferred from Blender).

Upon exporting, Verge3D bakes this modifier, so you get high-quality rendering without using normal maps. Baking is done automatically, still it's worth checking that the Bake Modifiers property is enabled in the Verge3D export settings (again Blender-only):

For background mesh we use a basic icosphere model, that embraces the entire scene.

Animation

To animate the spinner we put two keyframes at the start and the end of the 200 frames animation interval.

We use the Bezier interpolation to make the animation smooth. With just two keyframes we can implement quite advanced animation, consisting on 3 stages:

• Stage 1 (start) — the spinner rapidly accelerates to its maximum rotation speed
• Stage 2 (middle) — the spinner rotates at its maximum speed
• Stage 3 (end) — the spinner gradiually decelerates and finally stops

When the animation finally reaches its end, it will stop — see the Loop Mode set to Once in the object properties.

By default, Verge3D automatically starts all animations assigned in Blender / 3ds Max / Maya. This is not what we want, since in the Spinner app we use Puzzles to start the corresponding animations by user action. This is why we disable the Auto Start property in the object properties:

Materials

For spinner material we use a basic metallic shader based on the Principled BSDF shader node (Physical Material in 3ds Max, Standard Surface in Maya):

By setting Metallic value to 1 and Roughness input to 0.5 we can get quite realistic results.

Background

For background sphere we use the following setup based on the Emission shader node with texture node attached, representing a pattern of the colored triangles.

This setup is common and actually has nothing to do with light emission. Here we just create a shade-less material that won't be affected by the scene lights or environment lighting.

In 3ds Max, there is no Emission node, so we use the Emission Color Map input of the Physical material (with 1 as roughness and 0 as metalness to represent a diffuse shader).

In Maya, the material is based on the surfaceShader node:

Lighting

Physically-based materials, we assigned earlier, require proper environment lighting, which in case of Blender is based on the World nodes:

The equirectangular environment texture node connected to the background node. We use an HDR image to create realistic lighting environment for our materials, so we don't need any additional light sources. Pay attention, that since we're using an HDR map, the Color Space property is set to Linear Rec.709.

Lighting setup in 3ds Max / Maya is a bit different. In 3ds Max we assign the same texture using the Environment and Effects dialog:

While in Maya we use the aiSkyDomeLight object:

Here we set the Format property of the aiSkyDomeLight object to latlong and the Color Space property of the file node to Raw (scene-linear Rec 709/sRGB is also OK).

Puzzles

To make the Spinner demo interactive, we implement the following scenario:

1. When the user clicks on the colored spheres, the spinner will change its color. Basically, we have a simple 3D configurator here.
2. When the user clicks on the spinner itself, it will start rotating. Second click on the rotating spinner will stop the animation.

Also, to make our app more entertaining, both events should generate sounds: "paint" and "rolling".

This scenario is handled by the puzzles from the Main tab:

Let's discuss everything in detail.

First logic is based on the when clicked puzzle to handle click and the assign material puzzle to assign the corresponding material to the spinner parts (represented by a group aka collection in Blender). The "spinner_parts" group includes the central part and main spinner body.

Also, upon clicking we execute the play puzzle to play the "paint.mp3" sound.

Second logic is based on the same when clicked puzzle but this time we use the play animation / stop animation puzzle blocks.

Click is registered for the "all_parts" group, which includes the central part, main body part, as well as 3 spinner rings. Basically, the user may click any of these 5 objects to start rolling. The is anim playing status is checked to implement the following basic logic: if the spinner is rotating, we need it to stop. If it's stopped, we need it to start rotating.

Also, upon clicking we execute the play puzzle to play the "rolling.mp3" sound. Pay attention that this sound is looped (has the loop prop checked).

One final tweak to make the app perfect. We need our sounds to be fully loaded before the user clicks onto something to prevent glitches. Also, the default sounds are too loud. That's why we add the following blocks at the beginning of the entire Puzzles scenario:

This snippet consists of the set volume and load sound puzzles.

E-Commerce

E-commerce is an optional (and quite advanced) feature of the Spinner demo, that's why the corresponding puzzles are placed in the separate E-Commerce tab:

The logic checks that the app is running under the WooCommerce system (this is a top tier e-commerce plugin for WordPress CMS), and connects to it. Since the look of our spinner model is now controlled by WooCommerce, we hide the color ball objects.

Inside WooCommerce, the product page is configured to use the so-called variations to allow customizations by the user. In the Spinner demo we use the "color" and "size" variations. The former chooses material color ("Red", "Blue", "Yellow"), the later the size of the spinner model ("Small", "Medium", "Large").

Variations are reported back to the connect to WooCommerce puzzle with the product info block. For "size" we just scale the spinner, for "color" we assign the corresponding material. Again, in this logic we play the "paint.mp3" sound to make switching more fun.

BTW, check the Verge3D Sandbox to see how the Spinner demo works inside the WooCommerce product page. Also, see more info on how to integrate Verge3D with WooCommerce here.

Demo Sources

The Spinner demo is available for free (including Blender/3ds Max/Maya scenes and Puzzles) from the Verge3D Asset Store:

Download and get your hands on this app! Try to change something and see how it works out. Don't be afraid to brake anything as you can always start from scratch.