我在这里有几次类似的幻灯片显示！它工作正常，但我没有得到正确的映射在一个天空。我不是编码器，但我想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-Frame Slideshow感到高兴。
我有一个解决方案，但我已经改变了很多你的东西。
我已经摆脱了画布，你已经拥有三个图像资源，无需重写或相互缓冲它们。只需存储资产ID并使用setAttribute("material", "src", picID)
此外，我添加了一个动画组件，因此您的幻灯片将有一个很好的平滑过渡。您需要将动画持续时间设置为幻灯片放映时间/ 2，因为它来回移动。
这说，看看我的fiddle。
至于问题的drawImage部分，drawImage将图像绘制（写入）到canvas元素上。映射很好，因为你只需要确保你有一个spherical photo，否则它将在整个模型中被拉伸。