Class CSS3DRender

constructor

• new CSS3DRender(scene?): CSS3DRender

• Parameters

  • Optionalscene: Scene

  Returns CSS3DRender

hooks

state

StaticsetBehindModeContainer

StaticsetFrontModeContainer

behindModeCSS3DRenderer

• get behindModeCSS3DRenderer(): ICSS3DRenderer

• Returns ICSS3DRenderer

frontModeCSS3DRenderer

• get frontModeCSS3DRenderer(): ICSS3DRenderer

• Returns ICSS3DRenderer

scene

• get scene(): Scene

• Returns Scene

StaticbehindModeCSS3DRenderer

• get behindModeCSS3DRenderer(): ICSS3DRenderer

• Returns ICSS3DRenderer

StaticfrontModeCSS3DRenderer

• get frontModeCSS3DRenderer(): ICSS3DRenderer

• Returns ICSS3DRenderer

create3DElement

• create3DElement(camera, points, params?): void | {
      appendToElement: ((element: Element) => ICSS3DRenderer);
      container: HTMLElement;
      css3DObject: CSS3DObjectPlus<HTMLElement>;
      disable: (() => void);
      dispose: (() => boolean);
      enable: (() => void);
      hide: (() => void);
      id: string;
      render: (() => void);
      setEnabled: ((enabled: boolean) => void);
      setVisible: ((visible: boolean) => void);
      show: (() => void);
  }

• Parameters

  • camera: Camera
  • points: AnyPosition[]

    矩形四个点坐标
  • Optionalparams: {
        autoRender?: boolean;
        container?: HTMLElement;
        devicePixelRatio?: number;
        pointerEvents?: "auto" | "none";
        ratio?: number;
        scene?: Scene;
        wrapperStyle?: Partial<CSSStyleDeclaration>;
    } & ({
        mode?: "front";
    } | {
        mode: "behind";
        scene: Scene;
    })

    均为可选值 @config_document params 均为可选值

    key	type	defaultValue	comment
    ratio	number	0.00216	1px对应多少米，默认为 0.00216，即1px对应2.16mm
    devicePixelRatio	number	1	设备的物理像素分辨率与CSS像素分辨率的比值
    container	HTMLElement	undefined	自定义 return 中的 container
    pointerEvents	'none'|'auto'	'none'	container 的 css属性：pointer-events 的值
    autoRender	boolean	true	是否自动渲染，通常为true
    mode	'front'|'behind'	front	两种模式:
    			front 模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐
    			behind 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的
    scene	THREE.Scene	undefined	如果 mode 为 behind，需要传入

  Returns void | {
      appendToElement: ((element: Element) => ICSS3DRenderer);
      container: HTMLElement;
      css3DObject: CSS3DObjectPlus<HTMLElement>;
      disable: (() => void);
      dispose: (() => boolean);
      enable: (() => void);
      hide: (() => void);
      id: string;
      render: (() => void);
      setEnabled: ((enabled: boolean) => void);
      setVisible: ((visible: boolean) => void);
      show: (() => void);
  }

     {
       id: string,                             // id
       container: HTMLDIVElement               // dom容器
       dispose: () => void                     // 销毁
       css3DObject: CSS3DObject                // THREE.CSS3DObject 实例
       render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined
       setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)
       show: () => void                        // 同 setVisible(true)
       hide: () => void                        // 同 setVisible(false)
       setEnabled: (enabled: boolean) => void   // 添加/移除 container, 同 setEnabledById(id, enabled)
       enable: () => void                      // 同 setEnabled(true)
       disable: () => void                     // 同 setEnabled(false)
     } | void
  Copy

  Description

  根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中

disable

• disable(__namedParameters?): void

• Parameters

  • __namedParameters: {
        userAction: boolean;
    } = ...

    • userAction: boolean

  Returns void

dispose

• dispose(): void

• Returns void

enable

• enable(__namedParameters?): void

• Parameters

  • __namedParameters: {
        userAction: boolean;
    } = ...

    • userAction: boolean

  Returns void

getBehindCSS3DObjectGroup

• getBehindCSS3DObjectGroup(__namedParameters?): CSS3DBehindGroup

• Parameters

  • __namedParameters: {
        addGroupIfNotExists: boolean;
    } = {}

    • addGroupIfNotExists: boolean

  Returns CSS3DBehindGroup

getBehindCSS3DScene

• getBehindCSS3DScene(__namedParameters?): CSS3DBehindScene

• Parameters

  • __namedParameters: {
        createSceneIfNotExists: boolean;
    } = {}

    • createSceneIfNotExists: boolean

  Returns CSS3DBehindScene

getCurrentState

• getCurrentState(): CSS3DRenderState

• Returns CSS3DRenderState

getFrontCSS3DObjectGroup

• getFrontCSS3DObjectGroup(__namedParameters?): CSS3DFrontGroup

• Parameters

  • __namedParameters: {
        addGroupIfNotExists: boolean;
    } = {}

    • addGroupIfNotExists: boolean

  Returns CSS3DFrontGroup

getFrontCSS3DScene

• getFrontCSS3DScene(__namedParameters?): CSS3DFrontScene

• Parameters

  • __namedParameters: {
        createSceneIfNotExists: boolean;
    } = {}

    • createSceneIfNotExists: boolean

  Returns CSS3DFrontScene

hide

• hide(__namedParameters?): Promise<void>

• Parameters

  • __namedParameters: {
        userAction: boolean;
    } = ...

    • userAction: boolean

  Returns Promise<void>

render

• render(camera): void

• Parameters

  • camera: Camera

  Returns void

setEnabledById

• setEnabledById(id, enabled): void

• Parameters

  • id: number
  • enabled: boolean

  Returns void

setScene

• setScene(scene): void

• Parameters

  • scene: Scene

  Returns void

setState

• setState(state, options?): void

• Parameters

  • state: Partial<CSS3DRenderState>
  • options: {
        userAction: boolean;
    } = ...

    • userAction: boolean

  Returns void

setVisibleById

• setVisibleById(id, visible): void

• Parameters

  • id: number
  • visible: boolean

  Returns void

show

• show(__namedParameters?): Promise<void>

• Parameters

  • __namedParameters: {
        userAction: boolean;
    } = ...

    • userAction: boolean

  Returns Promise<void>