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

Question

我在这里放过几次类似的幻灯片！它工作正常，但我没有在天空中得到正确的映射。我不是编码员，但我猜 drawImage 只是为矩形对象而不是 spherical 制作的？ drawImage 是否有适用于 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!");
    }
});

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Canvas Texture</title>
    <meta name="description" content="Canvas Texture - A-Frame">
    <script src="./components/aframe-v0.6.0.js"></script>
    <script src="./components/slideshow.js"></script>
</head>

<body>
    <a-scene>
        <a-assets>
            <img id="pic01" src="Tulips.jpg">
            <img id="pic02" src="Tulips2.jpg">
            <img id="pic03" src="Tulips3.jpg">
            <canvas id="slide" name="slide" crossOrigin="anonymous"> </canvas>
        </a-assets>
        <a-sky material="shader: flat; src: #slide" draw-canvas="#slide">
            <a-sky/>
    </a-scene>
</body>

</html>

如果有人知道如何很好地淡出图片，请随时分享！我敢打赌，很多人会对漂亮的 A 型框架幻灯片感到高兴。

Answer 1

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

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

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

这就是说，看看我的 fiddle。

至于问题的 drawImage 部分，drawImage draws (writes) an image onto a canvas element. The mapping is fine, since You only need to make sure You have a spherical photo，否则它会被拉伸到整个模型。

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

A-Frame/Javascript-Slideshow has wrong mapping

javascript

slideshow

aframe