Introduction

In addition to integrating via frontend components, we can also integrate scenes edited in iCraft Editor through iframe using URL parameters.

Usage

Here's an example demonstrating how to integrate an iCraft Editor scene using an iframe.

const style = {
  width: "100%",
  height: "500px",
  position: "relative" as const,
  overflow: "hidden" as const,
};
 
const EDITOR_BASE_URL = "https://icraft.gantcloud.com/editor";
 
export default () => {
  const params = new URLSearchParams({
    url: "https://icraft.gantcloud.com/api/static/templates/ArgoCD.icraft",
    preview: "true",
    defaultAnimationPlan: "0",
    autoPlay: "true",
    loop: "true",
  });
 
  const src = `${EDITOR_BASE_URL}?${params.toString()}`;
 
  return (
    <div style={style}>
      <iframe
        src={src}
        title='iCraft Editor'
        width='100%'
        height='100%'
        style={{ border: "none" }}
        allowFullScreen
      />
    </div>
  );
};

URL Parameters

Name	Description	Type	Default	Required
url	.icraft file address	string		false
preview	Preview mode	boolean	false	false
defaultCustomCamera	Default custom camera index	number		false
defaultAnimationPlan	Default animation plan index	number		false
defaultLoop	Default loop playback	boolean	false	false
autoPlay	Auto playback	boolean	false	false
template	Template identifier	string		false

Introduction

Usage

URL Parameters

Home

Others