API

Player Component Props

Name	Description	Type	Default	Required
src	.iplayer file URL	string		true
fetchOptions	Fetch options for file request	RequestInit	undefined	false
onClick	Click callback	(params: MouseEventParams) => void	undefined	false
onDoubleClick	Double click callback	(params: MouseEventParams) => void	undefined	false
onMouseMove	Mouse move callback	(params: MouseEventParams) => void	undefined	false
onContextMenu	Context menu callback	(params: MouseEventParams) => void	undefined	false
onReady	Ready callback	(instance:ICraftPlayerInstance) => void	undefined	false
addons	Addons	React.ReactNode or AddonKeys[]	undefined	false
defaultCustomCamera	Default custom camera index	number	undefined	false
defaultAnimationPlan	Default animation plan index	number	undefined	false
defaultLoop	Default loop playback	boolean	false	false
autoPlay	Auto playback	boolean	false	false
locale	Internationalization	'zh-CN' or 'en-US' or Record<string,LocaleInterface>	'en-US'	false

TypeScript Types

interface MouseEventParams {
  instance: Element3D | null;
  event: MouseEvent;
  data: OptionsType | null;
}
 
type AddonKeys = "CameraBar" | "PlayerBar" | "EnterSubScene" | "ZoomBar" | "ExitSubScene";

Player Instance Methods

Name	Description	Type
getDom	Get DOM	() => HTMLElement
getElementByKey	Get element by unique key	(key: string) => Element3D or undefined
getElementsByName	Get multiple elements by name	(name: string) => Element3D[]
getCurrentSceneElements	Get all element instances in current scene (excluding sub-scenes)	() => Element3D[]
getAllSceneElementsData	Get all element data in current scene (including sub-scenes)	() => ElementData[]
playAnimationByElementKey	Execute built-in animation on element	(elementKey: string,animationOptions: GlobalAnimationOptions) => Promise<Actuator \| null>
cancelAnimationByElementKey	Cancel animation by element key	(elementKey: string) => void
cancelAnimation	Cancel all animations	() => void
toogleView	Toggle 2D/3D view	(is3D: boolean) => void
toogleCamera	Toggle camera type (perspective or orthographic)	(isPerspectiveCamera: boolean) => void
toogleAutoRotate	Toggle auto-rotation	(isAutoRotate: boolean) => void
updateAutoRotateSpeed	Update auto-rotation speed	(speed: number) => void
changeCustomCamera	Switch custom camera	(index: number, duration?: number) => void
enterSubScene	Enter sub-scene of current selected element	(durations?: number) => Promise<void>
exitSubScene	Exit sub-scene	() => Promise<void>
tooglePlay	Toggle play	() => void
prevStep	Previous step	() => Promise<void>
nextStep	Next step	() => Promise<void>
replay	Replay	() => Promise<void>
reset	Reset	() => Promise<void>
toggleLoop	Toggle loop	() => void
zoomIn	Zoom in	() => void
zoomOut	Zoom out	() => void
resetCamera	Reset camera view	() => void
exportImage	Export image	() => Promise<void>
openFileByUrl	Open file by URL	(url: string, options?: RequestInit) => void

TypeScript Types

// Element data
interface ElementData {
  key: string;
  type: string;
  options: OptionsType;
}
 
// Custom locale
interface LocaleInterface {
  cameraBar: {
    speed: string;
    orthographicCamera: string;
    perspectiveCamera: string;
    autoRotate: string;
  };
  playerBar: {
    replay: string;
    pause: string;
    play: string;
    prev: string;
    next: string;
    loop: string;
    reset: string;
  };
  enterSubScene: string;
  exitSubScene: string;
  zoomBar: {
    zoomIn: string;
    zoomOut: string;
    resetCamera: string;
  };
}

Player Static Methods

Name	Description	Type
defineConfig	Set static global configuration	(config: StaticConfig) => void

TypeScript Types

interface StaticConfig {
  // Global font resource path, affects all text elements, highest priority, suitable for scenarios with only one font
  fontUrl?: string;
  // Global font resource definition, suitable for scenarios with multiple fonts
  fonts?: FontFamily[];
  // Draco Decoder Path, The default path is unpkg. If the network is not accessible, you can configure the path yourself.
  dracoDecoderPath?: string;
}
 
export interface FontFamily {
  name: string;
  styles: {
    weight: string;
    fontUrl: string;
  }[];
}

Element3D Instance Methods

Name	Description	Type
setDisabled	Set disabled state (grayed out)	(disabled: boolean) => void
setVisible	Set element visibility	(visible: boolean) => void

Introduction Event

API

Player Component Props

Player Instance Methods

Player Static Methods

Element3D Instance Methods

Home

Others

Legal