Question

我刚刚开始尝试使用AR.js制作A形框架，希望可以在纸上渲染对象。我已经测试了对象，并正确渲染了该对象。但是，当我尝试使用自定义图像进行操作时，它将不再起作用...我正在尝试在模式上显示gltf文件。模式（以图像形式）：，是使用https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

制作的

有人问我的代码有什么问题吗，为什么相机没有将这种模式作为匹配项？是我的代码吗？还是与我要加载的特征码文件有关？

<head>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
</head>

<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='sourceType: webcam;'>
        <a-assets>
            <a-asset-item id="mesh" src="./data/Camargue.gltf"></a-asset-item>
        </a-assets>
        <a-entity gltf-model="#mesh" rotation="0 180 0" modify-materials></a-entity>
        <a-light type="directional" color="#fff" position="-1 -5 -5" look-at="a-entity"></a-light>
        <a-light type="ambient" color="#fff" intensity="3" look-at="a-entity"></a-light>
        <a-marker-camera type="pattern" patternUrl="data/pattern-logo.patt"></a-marker-camera>
    </a-scene>

    <script>
        AFRAME.registerComponent('modify-materials', {
            init: function () {
                // Wait for model to load.
                this.el.addEventListener('model-loaded', () => {
                    // Grab the mesh / scene.
                    const obj = this.el.getObject3D('mesh');
                    // Go over the submeshes and modify materials we want.
                    obj.traverse(node => {
                        if (node.name.indexOf('Loggia-frame') !== -1) {
                            var environment = new THREE.CubeTextureLoader().setPath('data/HDR/').load(
                                [
                                    'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg'
                                ]
                            );

                            environment.format = THREE.RGBFormat;
                            environment.mapping = THREE.CubeReflectionMapping;

                            var material = node.material;
                            material.envMap = environment;
                        }
                    });
                });
            }
        });
    </script>
</body>

A帧未跟踪自定义图像

0 个答案: