我在这里展示了几次类似的幻灯片!它工作正常，但我在天空上没有得到正确的映射。我不是编码员，但我猜 drawImage 只是为矩形对象而不是 球形 制作的？是否有适用于spherical的drawImage的替代方案？
这是我的代码:
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 形幻灯片感到高兴。
最佳答案
我有一个解决方案，但我改变了很多你的东西。
我已经摆脱了 Canvas ，您已经拥有三个图像资源，无需重写或相互缓冲。
只需存储 Assets ID 并使用 setAttribute("material", "src", picID)
此外，我还添加了动画组件，因此您的幻灯片将有一个很好的平滑过渡。您需要将动画持续时间设置为幻灯片的时间/2，因为它会来回播放。
这就是说，看看我的 fiddle .
<小时/>至于问题的drawImage部分，drawImage将图像绘制(写入)到 Canvas 元素上。映射很好，因为您只需要确保您有 spherical photo ，否则它会拉伸(stretch)到整个模型。
关于javascript - A-Frame/Javascript-Slideshow 映射错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48011420/