插件

Addon 插件是 iCraft Player 的扩展组件，可以实现更多的功能，比如相机控制、缩放控制、进入子场景、退出子场景、播放器控制等。用户可以自由选择需要的插件，并进行组合。

快捷启用

可以给 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	相机工具条，用于切换 2D 或 3D 视角，切换透视或正交相机，切换自定义相机视角
ZoomBar	缩放工具条，用于放大、缩小视角，重置视角
PlayerBar	播放器工具条，用于播放、暂停、停止、上一步、下一步、循环控制
EnterSubScene	进入子场景控件，开启后选中物体时显示
ExitSubScene	退出子场景控件，在子场景当中才会显示

手动引用

也可以手动引用需要的 Addon,自由组合,重写样式

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

自定义插件

可以通过调用实例的方法来实现自定义的插件，如下面的示例，点击右下角的按钮可以切换自动旋转功能

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

悬浮提示相机控制栏

插件

快捷启用

AddonKeys

手动引用

自定义插件

Home

Others