A-Frame / Javascript-Slideshow映射错误
[英]A-Frame/Javascript-Slideshow has wrong mapping
问题描述
I have a similar slideshow displayed a few times here! 
我在这里有几次类似的幻灯片放映！ It works fine but I don't get the right mapping on an a-sky. 它工作正常，但我在a天空上没有正确的映射。 I am not a coder but I guess drawImage is just made for rectangular objects instead of spherical ? 我不是编码人员，但我猜drawImage是为矩形对象而不是spherical对象制作的？ Is there an alternative to drawImage which works for spherical ? 是否有drawImage可以替代spherical的替代方法？
Here are my codes: 这是我的代码：
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>
And if anybody knows how to nicely fade over the pictures, please feel free to share! 如果有人知道如何很好地淡化图片，请随时分享！ I bet a lot of people would be happy about a nice A-Frame Slideshow. 我敢打赌，很多人会对A-Frame幻灯片演示感到满意。
1 个解决方案
解决方案1
0 已采纳 2017-12-29 09:26:21
I've got a solution, but I've altered quite a lot of Your stuff. 我有一个解决方案，但是我已经更改了您的很多内容。
I've got rid of the canvas, You already have three image assets, no need to rewrite, or buffer them on each other. 我已经摆脱了画布，您已经拥有三个图像资产，无需重写或相互缓冲。 Just store the asset id's and use setAttribute("material", "src", picID) 只需存储资产ID并使用setAttribute("material", "src", picID)
Furthermore I've added the a-animation component, so Your slideshow will have a nice smooth transition. 此外，我还添加了a-animation组件，因此您的幻灯片将有一个流畅的过渡。 You need to set the animation duration to the slideshow's time / 2, for it goes back and forth. 您需要将动画持续时间设置为幻灯片的时间/ 2，因为它是来回移动的。
This said, check out my fiddle . 这样说，看看我的小提琴 。
As for the drawImage part of the question, drawImage draws (writes) an image onto a canvas element. 至于问题的drawImage部分， drawImage将图像绘制（写入）到canvas元素上。 The mapping is fine, since You only need to make sure You have a spherical photo , otherwise it will get stretched all over the model. 映射很好，因为您只需要确保具有球形照片即可 ，否则它将在整个模型中拉伸。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.