1

我正在使用使用 Three.js 的 pannellum (http://www.mpetroff.net/archives/2012/08/28/pannellum-1-2/)，我正在使用它来处理本地文件。它适用于小文件，但我拥有的图像是 5000 * 10000，它不会加载它们。有什么限制以及如何将其用于大图像。我可以使用 img 标签加载图像并将该图像注入应用程序吗？在代码中我发现我有：

var panoimage = new Image();

我可以用他的东西代替它吗？

 var panoimage = document.getElementById('PanImage');

Image() 的源代码在哪里？它是JS的一部分吗？我找不到关于这门课的任何信息。

编辑 1

我对 pannellum 进行了以下更改，因此它从 html 上的图像加载图像，而不是动态加载它。

在 pannellum.htm 我添加了以下 html：

 <img id='panimage' src="000063.jpg" style="visibility: collapse;"/>

在 pannellum.js 中，我将第 104 行更改为：

var panoimage = document.getElementById('panimage');

我也注释掉了

panoimage.onerror = function() {

所以应该在图像下载后立即调用的代码（因为当我们到达他的点图像已经下载时）

我还注释掉了设置图像来源的行。

它不下载图像。它只显示黑屏。

4

2 回答 2

1

我发现各种浏览器会自行决定不渲染他们认为太大的图像（请参阅我不久前提出的这个问题）。可悲的是，这取决于用户代理。Canvas 有时有处理这个问题的抽象，但上次我在 DHTML 中处理非常大的图像时，我不得不放弃（甚至将它们切成一口大小的小块，但一段时间后它们就无法渲染了）。

new Image()是一种旧的 DOM 方法，用于在文档之外从头开始生成图像元素——在此处记录。你的第一行相当于：

var panoimage = document.createElement('img');

您已将其替换为有效的行会获取文档中已经存在的图像，而不是从头开始创建新图像。

于 2012-10-02T13:03:52.697 回答
0

看Pannellum源码，好像是用Three.js的WebGL渲染器。WebGL 对 GPU 施加的纹理大小（以及它可以渲染的图像大小）有限制。你可以在这里检查你的（“最大纹理大小”）：http: //jsfiddle.net/DA7wr/

想到的另一件事是使用非二次幂图像大小和错误类型的纹理参数，但由于 Pannellum 演示也有 NPOT 图像，我想这不是问题。

于 2012-10-03T08:15:57.240 回答