@oasis-engine/ark

Avatar Component

This is a virtual avatar component. We support ArkComponent, which can quickly generate virtual avatar, edit avatar, and interact with each other.

Usage

1. Create component manually

import { ArkComponent } from "@oasis-engine/ark";

const arkComponent = entity.addComponent(ArkComponent);

// init avatar
arkComponent.replaceModel("***").then(() => {
  // play animation, actions can be bone-mapped
  const animationList = arkComponent.animationNameList;
  const clipName1 = animationList[0];
  const duration = arkComponent.getAnimationDuration(clipName1);
  arkComponent.animator.play(clipName1);

  // Edit blendShape by name.
  const bsNameList = arkComponent.blendShapeNameList;
  arkComponent.editBlendShape("bs1", 0.5);
  arkComponent.getBlendShapeValue("bs1"); // 0.5

  // Use some ark materials
  arkComponent.useSSSMaterial();

  // ... reference to typescript in ArkComponent ...
});

2. Use low code mode to edit the products exported by the Ark platform

import { ArkComponent } from "@oasis-engine/ark";

const handleSceneLoaded = (oasis) => {
  const rootEntity = oasis.engine.sceneManager.activeScene.getRootEntity();
  const avatarEntity = rootEntity.findByName("avatar");
  const avatar = avatarEntity.getComponent(ArkComponent);

  // use avatar capabilities in ArkComponent.
  avatar.onReady.then(()=>{
    avatar.***();
    avatar.***();
  })
};

npm

The ark component is published on npm with full typing support. To install, use:

npm install @oasis-engine/ark -S

This will allow you to import ark component entirely using:

import { ArkComponent } from "@oasis-engine/ark";

API

You can download ArkComponent by following the steps above, and then operate according to the typescript