@icraft/player v0.0.4

@icraft/player

Introduction

Using the iCraft Player front-end component, you can easily integrate scenes edited by iCraft Editor into your project and provide rich interactive functions.

How to use

First, you need to install the @icraft/player package:

pnpm install @icraft/player --save

Then, import the ICraftPlayer component in your project and pass in the fileUrl property, with the value of the .iplayer file address exported by iCraft Editor.

import { ICraftPlayer } from "@icraft/player";

export default () => {
return <ICraftPlayer fileUrl='*.iplayer' />;
};

Open your project in a browser, and you should be able to see the scene edited by iCraft Editor embedded in the page.

License

The use of iCraft Player requires commercial licensing. If you need to obtain iCraft Player commercial licensing, please contact us

Set the authorization code before using iCraft Player

import { LicenseManager } from "@icraft/player";
LicenseManager.setLicenseKey("your license key");
// befor use ICraftPlayer

Click Events

Here is an example showing how to use the iCraft Player component to interact with element click events.

import type {
  ClickParams,
  Element3D,
  ICraftPlayerInstance,
} from '@icraft/player';
import { ICraftPlayer } from '@icraft/player';
import { useCallback, useLayoutEffect, useRef, useState } from 'react';

export default () => {
  const instanceRef = useRef<ICraftPlayerInstance>();

  const [activeKey, setActiveKey] = useState<string>('');

  const onClick = useCallback((params: ClickParams) => {
    const { item } = params;
    console.log(params, item);
    setActiveKey(item?.key || '');
  }, []);

  useLayoutEffect(() => {
    const instance = instanceRef.current;
    if (!instance || !activeKey) {
      return;
    }
    let timmer: string | number | NodeJS.Timeout | undefined;
    let activeElement: Element3D | undefined;

    const flash = () => {
      const element = instance?.getElementByKey(activeKey);
      if (element) {
        activeElement = element;
        element?.setVisible((visible) => !visible);
      }
    };
    console.log('instance', instance);
    timmer = setInterval(flash, 500);

    return () => {
      if (timmer) {
        activeElement?.setVisible(true);
        clearInterval(timmer);
      }
    };
  }, [activeKey]);

  return (
    <ICraftPlayer
      fileUrl="/car-structure.iplayer"
      onClick={onClick}
      ref={instanceRef}
    />
  );
};