Vitalify Asia | Mobile/Web, XR(AR/VR), AI Development - アプリ開発ならバイタリフィアジア - Interactive Mascot: Add Personality to Your Website

Vitalify Asia | Mobile/Web, XR(AR/VR), AI Development - アプリ開発ならバイタリフィアジア

INTRODUCTION

Do you want to make your website more engaging and fun? Adding an interactive model can transform a plain, static site into something lively and interactive. But if you're unsure where to start or worried it might take too much time, we’ve got you covered. Our Mascot web component makes it easy to integrate a lively model into your website with minimal effort. No complex setup—just a dynamic, eye-catching addition that will bring your content to life and keep your visitors hooked. Add personality and energy to your site with Mascot!

Our Mascot can walk, run, jump,... around the website page, show the text dialog or interact with the user through animations. If you have enough animation, you can make the mascot become a living pet.

Please check our demo at: https://www.vitalify.asia/

FEATURES

Mascot provides the base-tag component to add the 3D model that you want on your website.

In the current version, you can customize the model with the parameters that we provided.

Things you can customize include movement speed, model size, dragging the model with your cursor and animation controller.

Mascot displayed in the website

Add the component into the source code where you need to show the Mascot.

Input properties:

“modelpath”: input a string value. This is the path of the 3D model that you would like to use and is the mandatory property.
“scale”: in a number value. The size of the shown model is dependent on this property.
“modelscale”: input a number value. The 3D model will be contained by a canvas, and our component will show that canvas. If your 3D model is shown completely, you don’t need to care about this property. But if your 3D model is shown with the defect, please use this property and set the value as smaller than 4.5 (default value).
“movable”: input “0” or “1”. If the value is 0, the user can not drag the mascot with the cursor. If the value is 1, the user can drag and drop the mascot with the cursor.
“moveanim”: input a string value. This is the name of the animation that plays if the mascot moves.
“mouseoveranim”: input a string value. This is the name of the animation that plays if the cursor moves in canvas.
pickanim: input a string value. This is the name of the animation that plays if we drag the mascot
fallanim: input a string value. This is the name of the animation that plays if we release the mascot
“clickanim”: input a string value. This is the name of the animation that plays if the user clicks on the mascot.
“radomplayanims”: input the string list. This is the name of the animations that play randomly. If this value is empty, the mascot will play random animation in all of the animations.
“speed”: input a number value. This is the movement speed of the mascot.

Mascot component tag

HOW IT WORKS

To build web-based user interfaces and handle logic, React is an ideal choice. It provides hooks like useState, useEffect, useRef, and useMemo to make your code more versatile and easier to manage. For creating and rendering animated 3D graphics, we use the Three.js library, which utilizes WebGL to display 3D models in the browser.

To integrate React’s logic handling with Three.js’s 3D rendering, we use React Three Fiber as a bridge. For loading .gltf models and animations, we use useGLTF and useAnimations hooks from the react-three/drei library.

ReactDOM APIs are used to create the root and render the app in the browser, and Vite is our tool for packaging the source code. Vite offers fast local development, supporting TypeScript and JSX, while using Rollup and ESBuild for bundling.

To create the mascot component, we define a function (A) to manage properties, logic, and helper functions (B). A class extending HTMLElement (E) is used to invoke function A, forming the component class. We use Vite to configure the build process, and after running npm run build in the terminal, the web component is generated in the dist folder.

Web component packing graph

To make the 3D model interactive, we place it inside a canvas that moves randomly across the screen. Every few seconds, a new movement direction is generated, keeping the model in constant motion. If the canvas hits the screen borders, it bounces back to stay within view. Additionally, we enable dragging, where users can click and drag the canvas, moving it with their mouse until they release it. Other interactions like clicking or hovering are detected using React's built-in mouse events to trigger animations. Finally, the mascot can "fall down" when users scroll quickly, with the scroll speed determining the fall.