0.0.4 • Published 11 months ago

@icraft/player v0.0.4

Weekly downloads
-
License
Commercial
Repository
github
Last release
11 months ago

@icraft/player

NPM version NPM downloads

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.

Edit boring-cookies-7lxn6d

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}
    />
  );
};
0.0.4

11 months ago

0.0.3-alpha.18

12 months ago

0.0.3-alpha.17

12 months ago

0.0.3-alpha.16

12 months ago

0.0.3-alpha.15

12 months ago

0.0.3-alpha.12

12 months ago

0.0.3-alpha.9

12 months ago

0.0.3-alpha.8

12 months ago

0.0.3-alpha.7

12 months ago

0.0.3-alpha.6

12 months ago

0.0.3-alpha.5

12 months ago

0.0.3-alpha.4

12 months ago

0.0.3-alpha.3

12 months ago

0.0.3-alpha.1

12 months ago

0.0.2

12 months ago

0.0.1

12 months ago