Addon
Addons are extension components for iCraft Player that provide additional functionality such as camera control, zoom control, sub-scene navigation, player control, and more. Users can freely choose and combine the addons they need.
Quick Enable
You can pass a string array to the addons property to quickly enable addons.
import { ICraftPlayer } from "@icraft/player-react";
const style = {
width: "100%",
height: "100%",
position: "relative" as const,
overflow: "hidden" as const,
};
export default () => {
return (
<div style={style}>
<ICraftPlayer
src='/templates/NetworkArchitectureSpecial.iplayer'
addons={["CameraBar", "ZoomBar", "EnterSubScene", "ExitSubScene", "PlayerBar"]}
/>
</div>
);
};AddonKeys
| Name | Description |
|---|---|
| CameraBar | Camera toolbar for switching between 2D/3D views, perspective/orthographic cameras, and custom camera angles |
| ZoomBar | Zoom toolbar for zooming in/out and resetting view |
| PlayerBar | Player toolbar for play, pause, stop, previous/next step, and loop control |
| EnterSubScene | Enter sub-scene control, displayed when an object is selected |
| ExitSubScene | Exit sub-scene control, only displayed when inside a sub-scene |
Manual Import
You can also manually import the needed Addons for free combination and style customization.
import { CameraBar, ICraftPlayer, PlayerBar, ZoomBar } from "@icraft/player-react";
const style = {
width: "100%",
height: "100%",
position: "relative" as const,
overflow: "hidden" as const,
};
const CameraBarStyle = {
left: "50%",
transform: "translateX(-50%)",
top: "10px",
bottom: "initial",
};
const ZoomBarStyle = {
right: "10px",
top: "10px",
bottom: "initial",
};
const PlayerBarStyle = {
left: "10px",
transform: "translateX(0)",
width: "calc(100% - 20px)",
};
export default () => {
return (
<div style={style}>
<ICraftPlayer
src='/templates/NetworkArchitectureSpecial.iplayer'
addons={
<>
<CameraBar style={CameraBarStyle} />
<ZoomBar style={ZoomBarStyle} />
<PlayerBar style={PlayerBarStyle} />
</>
}
/>
</div>
);
};Custom Addons
You can create custom addons by calling instance methods. In the example below, clicking the button in the bottom right corner toggles the auto-rotation feature.
import { ICraftPlayer, ICraftPlayerInstance } from "@icraft/player-react";
import { useRef, useState } from "react";
const style = {
width: "100%",
height: "100%",
position: "relative" as const,
overflow: "hidden" as const,
};
const ButtonStyle = {
position: "absolute" as const,
bottom: "10px",
right: "10px",
zIndex: 1000,
backgroundColor: "white",
color: "black",
border: "1px solid #ccc",
borderRadius: "6px",
padding: "4px 8px",
};
export default () => {
const [autoRotate, setAutoRotate] = useState(false);
const instanceRef = useRef<ICraftPlayerInstance | null>(null);
const handleToggleAutoRotate = () => {
const value = !autoRotate;
instanceRef.current?.toogleAutoRotate(value);
setAutoRotate(value);
};
return (
<div style={style}>
<ICraftPlayer
src='/templates/NetworkArchitectureSpecial.iplayer'
ref={instanceRef}
addons={
<>
<button
style={{
...ButtonStyle,
backgroundColor: autoRotate ? "black" : "white",
color: autoRotate ? "white" : "black",
}}
onClick={handleToggleAutoRotate}
>
toogleAutoRotate
</button>
</>
}
/>
</div>
);
};