Question

我在这里有几次类似的幻灯片显示！它工作正常，但我没有得到正确的映射在一个天空。我不是编码员，但我猜drawImage只针对矩形对象而不是spherical？是否有适用于drawImage的{{1}}的替代方案？

以下是我的代码：

spherical

AFRAME.registerComponent('draw-canvas', {
    schema: {
        type: 'selector'
    },

    init: function() {
        var canvas = this.canvas = this.data;
        var ctx = this.ctx = canvas.getContext('2d');
        var i = 0; // Start Point
        var images = []; // Images Array
        var time = 3000; // Time Between Switch

        // Image List
        images[0] = "Tulips.jpg";
        images[1] = "Tulips2.jpg";
        images[2] = "Tulips3.jpg";

        // Change Image
        function changeImg() {
            document.getElementById('pic01').src = images[i];
            ctx.drawImage(document.getElementById('pic01'), 0, 0, 300, 300);

            // Check If Index Is Under Max
            if (i < images.length - 1) {
                // Add 1 to Index
                i++;
            } else {
                // Reset Back To O
                i = 0;
            }
            // Run function every x seconds
            setTimeout(function() {
                changeImg()
            }, time);
        }
        // Run function when page loads
        window.onload = changeImg;
        console.log("Hello World!");
    }
});

如果有人知道如何很好地淡化图片，请随时分享！我打赌很多人会对一个漂亮的A-Frame Slideshow感到高兴。

Answer 1

我有一个解决方案，但我已经改变了很多你的东西。

我已经摆脱了画布，你已经拥有三个图像资源，无需重写或相互缓冲它们。只需存储资产ID并使用setAttribute("material", "src", picID)

此外，我添加了一个动画组件，因此您的幻灯片将有一个很好的平滑过渡。您需要将动画持续时间设置为幻灯片放映时间/ 2，因为它来回移动。

这样说，请查看我的fiddle。

对于问题的drawImage部分，drawImage将图像绘制（写入）到canvas元素上。映射很好，因为你只需要确保你有一个spherical photo，否则它会在整个模型中被拉伸。

A-Frame / Javascript-Slideshow有错误的映射

1 个答案: