首页 > 解决方案 > 有什么方法可以使 3D 模型的背景在 ionic 的场景中透明?

问题描述

我的问题是如何使 a 帧的白色背景透明,以便我们可以看到我们从 iPhone 相机和 3D 模型中看到的任何内容。

我一直在尝试让 AR(增强现实)在 Ionic iOS 版本中工作。我意识到由于 iOS 中的某些原因,a-frame 无法触发网络摄像头。所以我想到的一种解决方法是按帧加载 3D 模型并同时触发相机。这是一些工作原理,在屏幕的 2/3 中我们可以看到摄像头输入,而 1/3 的模型加载了白色背景。如果我可以透明模型的背景,那么我会很高兴。有什么方法可以在 Ionic 中使模型的背景透明?这个问题还有其他解决方法吗?

在此处输入图像描述

我在 home.page.html 中的内容很简单:` Ionic Blank

<ion-content>
 <a-scene  *ngIf="iosReady"
       renderer="alpha: true;
               colorManagement: true;
               sortObjects: true;
               physicallyCorrectLights: true;
               maxCanvasWidth: 1920;
               maxCanvasHeight: 1920;">
  <a-gltf-model  position="1 1 -4" 
       src="/assets/models/LibertStatue.gltf" ></a-gltf-model>
 </a-scene>
</ion-content>`

在 home.page.ts 我有:

const cameraPreviewOpts: CameraPreviewOptions = {
            x: 0,
            y: 0,
            width: window.screen.width,
            height: window.screen.height,
            camera: 'rear',
            tapPhoto: true,
            previewDrag: true,
            toBack: true,
            alpha: 1
        }


        CameraPreview.startCamera(cameraPreviewOpts).then(
            (res) => {
                console.log(res);
            },
            (err) => {
                console.log(err);
            });
    });

标签: ionic-frameworkiframeionic2ar.js

解决方案


推荐阅读