@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}
/>
);
};
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago