使用 url 作为 ar.js 和 A-frame 的源设置多个 3D 模型时出现问题

Question

我最近刚刚在学习为 A-frame 项目编写代码。当尝试在 A-fram 中设置具有多个目标的场景时，本应由其中一个目标显示的 3D 模型不会出现。该模型与标记一样，使用 URL 作为原始 URL，但只有后者有效。

分离 ar.js 和 A-frame 证明问题显然出在 ar.js 上，但是，我可能弄错了。

您可以在此链接中找到我的代码，因为代码中的 URL 给我在这里发布太麻烦了。文件名是“问题代码”：

https://github.com/BrandexGlobal/ARDuratex/tree/master

Answer 1

在 HTML 中，您可以使用 base64 数据 uris 或 blob 将原始内容转换为可行的 url。此 url 应该 在任何其他 url 可以使用的任何地方都可以使用。我说 should 因为我不熟悉您正在使用的框架（我是反框架和支持香草的），所以您的框架可能会搞砸一些事情。

? 因为看起来你好像是 Stackoverflow 的新手，所以我将在这里解释这个复选标记。在阅读并查看我的答案后，如果（且仅当）您对我在此处发布的答案完全满意，那么您可以通过单击此复选标记来奖励我以接受此答案作为最佳答案。如果其他人发布了更好的答案，请单击他们的复选标记。单击复选标记不是永久性的：如果稍后有人发布了更好的答案，那么您可以单击他们的复选标记并将最佳答案切换到发布的新答案。

普通图片示例：

(function(mainImage) {
    mainImage.title = mainImage.src;
})(document.getElementById("mainImage"));

<img src="https://i.stack.imgur.com/Lr5Kg.jpg" id="mainImage"/>

使用 base64 数据 URI 的示例（注意 url 如何是图像本身）。另请参阅 Jpillora's base64 encoder 和 this demo page。

(function(mainImage) {
    mainImage.title = mainImage.src;
})(document.getElementById("mainImage"));

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAgACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAABQYHCAT/xAAwEAABAwMBBQYFBQAAAAAAAAABAgMEBQYRAAcSEyExIkFRYYGRFSMyUpJCQ3Gxwf/EABcBAAMBAAAAAAAAAAAAAAAAAAEFBgT/xAAnEQABAwMCBQUBAAAAAAAAAAABAgMEAAURIcETFDFxgRJBUWGR0f/aAAwDAQACEQMRAD8Arm0G/Ztv1V6mUimImS0xEPArcCUpWtZAz/ATnHmNJlmVRFx14wbqjvVefwy86t5zeisjPIBv6MemlG5p7tQr1VkuOElya/knuCFlAHoEDQ6FVYASFxXHDNc+SXVIcAS31yMYBORjn46WQrhJekmO0jIJ8/vsM/VO7jaIzELmHVkEDxntkZ7ZqwXjCp9GgLdtxj4TUm+20uCCyhXiChHZPqDo7ZV5yJ7VNZrbYQ5Nb3o0lGNx0/accs94I5Hy6aiFz3/LQ1wGVr4RRub+/wCXjoxRZ7tI2OpqS3kuFK0TISRyLR4wXufmF9O7Ti+nkG2lA5JUAR85/lS1iDktxSVDQjSuDatCNr7QpbTzWKZU1mSyru7f1p/PPuNBZbLrMNC6dDjTkI/YcOCPMH/NaS2mWfHvK23IL7aS8k77Ln6m1eR1nCRaV32w8ph+lyZsYckLZQV8tTsuE407x2N9iDV3CuDMuPy75AIGNcYOOnUEZpQlRriuyayy5TRT22zucVbIZSBn3XqyxUpmzKTalLjrTGdIQsobwhLAOVnPTpn30t0eFX57m5FtyoIe6Bb4KAg+PMHVw2Z2tJocZ2TV18epSAAt1fUD7B4D+9BaJVzcb46AhtvoNdyc1icEW3BamletxXbbSv/Z" id="mainImage"/>

使用 Blob URI 的示例。注意 url 是如何动态生成的，类似于内存地址指针。

(function(){
    var rawData = atob("/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAgACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAABQYHCAT/xAAwEAABAwMBBQYFBQAAAAAAAAABAgMEBQYRAAcSEyExIkFRYYGRFSMyUpJCQ3Gxwf/EABcBAAMBAAAAAAAAAAAAAAAAAAEFBgT/xAAnEQABAwMCBQUBAAAAAAAAAAABAgMEAAURIcETFDFxgRJBUWGR0f/aAAwDAQACEQMRAD8Arm0G/Ztv1V6mUimImS0xEPArcCUpWtZAz/ATnHmNJlmVRFx14wbqjvVefwy86t5zeisjPIBv6MemlG5p7tQr1VkuOElya/knuCFlAHoEDQ6FVYASFxXHDNc+SXVIcAS31yMYBORjn46WQrhJekmO0jIJ8/vsM/VO7jaIzELmHVkEDxntkZ7ZqwXjCp9GgLdtxj4TUm+20uCCyhXiChHZPqDo7ZV5yJ7VNZrbYQ5Nb3o0lGNx0/accs94I5Hy6aiFz3/LQ1wGVr4RRub+/wCXjoxRZ7tI2OpqS3kuFK0TISRyLR4wXufmF9O7Ti+nkG2lA5JUAR85/lS1iDktxSVDQjSuDatCNr7QpbTzWKZU1mSyru7f1p/PPuNBZbLrMNC6dDjTkI/YcOCPMH/NaS2mWfHvK23IL7aS8k77Ln6m1eR1nCRaV32w8ph+lyZsYckLZQV8tTsuE407x2N9iDV3CuDMuPy75AIGNcYOOnUEZpQlRriuyayy5TRT22zucVbIZSBn3XqyxUpmzKTalLjrTGdIQsobwhLAOVnPTpn30t0eFX57m5FtyoIe6Bb4KAg+PMHVw2Z2tJocZ2TV18epSAAt1fUD7B4D+9BaJVzcb46AhtvoNdyc1icEW3BamletxXbbSv/Z");
    var rawDataLength = rawData.length;
    var typedArrayView = new Uint8Array(rawDataLength);
    for (var i=0; i<rawDataLength; i=i+1|0)
        typedArrayView[i] = rawData.charCodeAt(i);
    var img = document.body.appendChild(document.createElement("img"));
    img.src = img.title = URL.createObjectURL(new Blob([
        typedArrayView
    ], {type: "image/jpeg"}));
})();

另一个例子是我们可以将图像编码为 Base64 数据 URI，然后使用 XMLHttpRequest 来 HTTP 获取数据 URI 的内容，但是将 XMLHttpRequest 的 returnType 属性设置为 Blob，以便我们从base64 数据 URI。

(function(){
    var xhr = new XMLHttpRequest;
    xhr.responseType = "blob";
    xhr.open("GET", document.getElementById("base64DataURIImage").src);
    xhr.onload = function(){
       var img=document.body.appendChild(document.createElement("img"));
       img.src = img.title = URL.createObjectURL(xhr.response);
    }
    xhr.send();
})();
(function(mainImage) {
    mainImage.title = mainImage.src;
})(document.getElementById("base64DataURIImage"));

As a base64 URI: <img id="base64DataURIImage" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAgACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAABQYHCAT/xAAwEAABAwMBBQYFBQAAAAAAAAABAgMEBQYRAAcSEyExIkFRYYGRFSMyUpJCQ3Gxwf/EABcBAAMBAAAAAAAAAAAAAAAAAAEFBgT/xAAnEQABAwMCBQUBAAAAAAAAAAABAgMEAAURIcETFDFxgRJBUWGR0f/aAAwDAQACEQMRAD8Arm0G/Ztv1V6mUimImS0xEPArcCUpWtZAz/ATnHmNJlmVRFx14wbqjvVefwy86t5zeisjPIBv6MemlG5p7tQr1VkuOElya/knuCFlAHoEDQ6FVYASFxXHDNc+SXVIcAS31yMYBORjn46WQrhJekmO0jIJ8/vsM/VO7jaIzELmHVkEDxntkZ7ZqwXjCp9GgLdtxj4TUm+20uCCyhXiChHZPqDo7ZV5yJ7VNZrbYQ5Nb3o0lGNx0/accs94I5Hy6aiFz3/LQ1wGVr4RRub+/wCXjoxRZ7tI2OpqS3kuFK0TISRyLR4wXufmF9O7Ti+nkG2lA5JUAR85/lS1iDktxSVDQjSuDatCNr7QpbTzWKZU1mSyru7f1p/PPuNBZbLrMNC6dDjTkI/YcOCPMH/NaS2mWfHvK23IL7aS8k77Ln6m1eR1nCRaV32w8ph+lyZsYckLZQV8tTsuE407x2N9iDV3CuDMuPy75AIGNcYOOnUEZpQlRriuyayy5TRT22zucVbIZSBn3XqyxUpmzKTalLjrTGdIQsobwhLAOVnPTpn30t0eFX57m5FtyoIe6Bb4KAg+PMHVw2Z2tJocZ2TV18epSAAt1fUD7B4D+9BaJVzcb46AhtvoNdyc1icEW3BamletxXbbSv/Z" />
<br /><br />
Then turned into a blob: 

资源：

对于 base64 数据 URI，请参阅 this MDN page

对于我自己的用于正确编码具有高 unicode 字符的 base64 URI 的库，请参阅this Github repository

对于 blob，请参阅 this MDN page