You need to enable JavaScript to run this app.
导航

3D展示

最近更新时间2023.12.19 14:08:31

首次发布时间2023.12.19 14:08:31

从 3.5.0 版本开始可用
除了通过摄像头来开始 AR 体验外,Web AR SDK 还支持创建可交互的 3D 展示。

开始使用 3D 展示

你可以使用 ARShowcase 创建一个 3D 展示的实例,ARShowcase 的基本 API 和 ARSession 类似:

// 获取之前创建的 canvas.
// Get get canvas element created in the previous step.
const canvas = document.getElementById("preview")! as HTMLCanvasElement;

// 创建 ARShowcase
// Create an ARShowcase
const showcase = new ARShowcase({
    canvas,
    authorization: {
        // 你的「授权证书文件」地址或内容:「https 文件链接」或「文件的 Base64 内容」。
        // Your authorization file url or content.
        file: "",
        // 授权服务地址
        // The authorization service endpoint.
        serviceEndpoint: "https://webar.volces.com/api/v2/webardeliver/verify",
    },
});

加载用于展示的特效包

在创建完 ARShowcase 之后,你可以使用 loadEffectclearEffect 来加载和清除要展示的特效。

// 特效包地址 
// Effect package url.
const effectURL = "";
await showcase.loadEffect(effectURL);

// 清除特效
// Clear 3D showcase effect.
await showcase.clearEffect();

调整交互选项

你可以通过设置 showcase.overrideCameraRotationSettings 对 3D 展示的相机进行微调。

showcase.overrideCameraRotationSettings = {
    rotationSpeed: Math.PI/10,
    stopsAfterUserInteraction: false
}

你可以设置两个可选值:

  • rotationSpeed 相机自动旋转速度,单位是「弧度/秒」。不设置此值则会以特效包中配置的值为准。

  • stopsAfterUserInteraction 相机是否在用户交互后停止自动旋转。不设置此值则会以特效包中配置的值为准。

释放资源

当你不再使用 3D 展示时,需要调用 dispose 方法释放相关的资源。

await showcase.dispose();