Javascript ThreeJS使用HTML画布更新纹理时给出；WebGL:无效“U值：texImage2D:无画布”；在手机上（iPhone Safari等）

我正在尝试用HTML5画布对象更新

THREE.Texture

“.image”属性。这对我笔记本电脑上的Chromium（MacOSX）有效。然而，iPhone Safari和iPhone Chrome都不起作用。根本原因是什么？如何解决

在Safari中使用Web Inspector时，我收到以下错误消息：

WebGL:无效的_值：texImage2D:无画布

我确保画布在更新之前已完全绘制，并使用以下代码更新材质：

material.map.image=loaded_canvas[curr_id]；//loaded_canvas存储已完成加载的画布，由Image（）对象绘制。
material.map.needsUpdate=true；

以下是材料的使用方法：

var geometry=新的三种球墨法（100.0,32,32）；
var材料=新的三网格基本材料({
映射：三个.ImageUtils.loadTexture（图像路径），
侧面：三，背面，
});

奇怪的是，如果我使用

THREE.ImageUtils.loadTexture

来加载图像，它工作得很好。然而，我的用例是我必须使用画布对象（画布上的多个图像）

---

谢谢。

这可能是通过d3-x3d上的此提交修复的，与此（已关闭）问题相关

如果问题仍然存在，这可能与每个浏览器在其支持的最大画布尺寸/区域上的限制有关

请参考另一篇文章的答案，查找每个浏览器的上述限制

超过大多数浏览器上的最大长度/宽度/面积会导致画布无法使用。（它将忽略任何绘图命令，即使在可用区域中也是如此。）
-

不幸的是，投票结果没有给出Safari的具体数字，但您可以在下面查找评论，如：

iPhone 6 Plus上的iOS 9.3.1 Safari限制为16777216像素（例如4096 x 4096）
-

或者看看这篇文章的其他答案，比如

因此，5242880（5 x 1024 x 1024）像素的任何大小变化都将 在大内存设备上工作，否则为3145728像素

500万像素画布（宽x高）示例：

Any total=256 MiB iPhone 6[未确认]
-----------------  -----------------   ---------------------
根据，对于通过
TextureLoader.load（）
方法创建的图像元素，.image属性更像是一个“getter”。如果要使用
元素创建纹理，可以使用
新建三点纹理（画布）创建它如下面的代码片段所示。纹理创建在
makeCanvasTexture（）
函数中进行：


函数makeCanvasTexture（）{
//创建画布上下文
var canvas=document.createElement（“canvas”）；
var context=canvas.getContext（“2d”）；
宽度=32；
高度=32；
//绘制径向梯度
var grad=context.createRadialGradient（16,16,6,16,16,16）；
渐变加色停止（0，“rgba（255,150,0,1.0”）；
渐变加色停止（0.5，“rgba（255,0,150,1.0”）；
渐变加色停止（1，“rgba（0，150，255，1.0）”；
context.fillStyle=grad；
fillRect（0,0,32,32）；
//使用画布创建纹理
var canvasTexture=new THREE.Texture（画布）；
canvasTexture.needsUpdate=true；
还可以编织；
}
//样板文件3.js设置
摄像机、场景、渲染器；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
场景=新的三个。场景（）；
scene.background=新的三种颜色（0xe1e1）；
摄像头=新的三个透视摄像头（35，window.innerWidth/window.innerHeight，0.1100）；
摄像机位置设置（0,30，-30）；
摄像机。注视（0，0，0）；
常数环境=新的三个方向光（0xddeeff，1）；
环境位置设置（0,1,1）；
//使用画布作为材质贴图纹理：
const floor=新的三个网格(
新的三点缓冲几何结构（20,0.25,20），
新的3.MeshBasicMaterial（{map:MakeCanVastTexture（）}）
);
场景。添加（环境光、地板）；
函数动画（t）{
//设置网格动画
地板旋转z+=数学sin（t*0.001）*0.1；
渲染器。渲染（场景、摄影机）；
请求动画帧（动画）；
}
设置动画（0）；
我遇到了类似的问题，你有什么结果吗？只是偶然发现了同样的错误。找到解决方案了吗？@voondo这个问题已经4年了。你仍然看到问题吗？你使用的是最新版本的three.js（目前是r109）吗？当前版本支持。否则发布a。您的画布大小是多少？iPhone浏览器仅支持max 4096x4096 IIRCWorking on my end
Any total <= 5242880
--------------------
5 x 1048576 ~= 5MP   (1048576 = 1024 x 1024)
50 x 104857 ~= 5MP
500 x 10485 ~= 5MP

device < 256 MiB   device >= 256 MiB   iPhone 6 [not confirmed]
-----------------  -----------------   ---------------------
<= 3145728 pixels  <= 5242880 pixels   <= 16 x 1024 x 1024 p
1773 x 1773        2289 x 2289         4096 x 4096