THREE 是否具有以异步方式加载画布的实用程序？答案

【问题标题】：Does THREE have a utility for loading canvases in an async manner?THREE 是否具有以异步方式加载画布的实用程序？
【发布时间】：2016-01-05 14:19:36
【问题描述】：

我有一个带有一些图片的画布，我想将它加载到一个纹理上，就像使用 ImageUtils 的图像一样。如您所知，画布没有“完成”渲染回调，所以我在这里受三人的摆布。我遇到过this，但这似乎与 AJAX 紧密结合。

【问题讨论】：

不是三个方面的专家，但是您如何在第一张画布上绘制图片？您应该依赖每个img标签的onload，然后其他所有事情都可以直接同步完成
我使用 onload 将 base64 img 字符串分配给模型中的属性。然后我读取模型并将 base64 字符串渲染到 cavas 上。我需要三个来检测图像何时完全加载并相应地更新我的纹理。
我认为代码 sn-p 可以帮助我们帮助您。
为什么不使用而不是

标签： javascript canvas three.js html5-canvas

【解决方案1】：

您可以从画布中读取图像作为数据 url：

var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();

在画布上执行drawImage后，图像数据已经在里面了。

这些数据 url 然后可以用作 Three.js 中的纹理。

 var texture = THREE.ImageUtils.loadTexture(dataURL);

更新

你也可以试试这个调试：

var texture = THREE.ImageUtils.loadTexture(dataURL, undefined, function(texture){
    // Handler for onLoad, this returns the img
    console.log(texture);
 },
 function(event){
    // Handler for onError, it returns the error event
    console.log(event);
 });

【讨论】：

似乎是一个完全有效的建议，但我得到：未捕获的类型错误：无法读取未定义的属性“宽度”
哪个JS文件？它来自 Three.js 内部吗？生成的dataURL是什么？
CanvasRenderer.js:841 Uncaught TypeError: Cannot read property 'width' of undefined
看起来 texture.image 未定义。您是否尝试在浏览器中打开 dataURL？它应该能够正确打开它。还在我的回答中添加了一些调试帮助。