ReferenceError: ImageBitmap is not defined

来源：5-12 2d画布绘制能力在threejs中的整合

JaxChu

2018-10-09

在 2d 画布绘制能力在 threejs 章节中，initGameoverCanvas 报错，在上一章节中 GamePage.init 绘制三角形木有问题。和视频不一样的调整了 GameController.init 方法中 initGamePage 和 initGameOverPage 的执行位置，不然 GameOverPage 会报 scene 为 undefined 。

但是后来报 ImageBitmap is not defined 不知道如何解。

Google 之后有网友解法为修改three.js 源码或者全局添加 ImageBitmap 方法。如下：

import * as THREE from './../libs/three.js';
import Game from './game/game.js';
window.THREE = THREE
GameGlobal.ImageBitmap = function() {} // <- HERE
class Main {
  static init () {
    Game.init();
  }
}

export default Main

然后添加了就好使了，矩形框出现了，不知道大家有木有遇到这个问题。

查了一下资料没有很明白为何这样，求解释？

写回答

3回答

千迦

2018-10-10

已采纳

看了一下，threejs是r88版本里面把这个ImageBitmap的类型支持加上的，因为ImageBitmap本身就是一种可以在canvas上绘制的位图类型，如果用户传了这么一个类型的数据用于canvas的绘制的话，threejs的代码需要兼容避免产生bug。https://github.com/mrdoob/three.js/releases 在threejs的releases中，r88版本的修改里有一条就是improved ImageBitmap support. #12077 (@Avocher)。

所以ImageBitmap本身现在在threejs中的使用仅仅是用于类型的判断和兼容，但又因为我们在微信小游戏中使用canvas的时候不会用到ImageBitmap这个类型去进行纹理的绘制（微信小游戏的api里面没有），所以threejs中这段兼容代码实际上对于小游戏环境来说，可有可无。这个地方可以修改threejs的源码，但这个不是很好的方式。GameGlobal.ImageBitmap = function() {}可以实现，但也不是很好，因为这样的兼容性代码太侵入业务了，每搞一个threejs的小游戏项目，都要在业务中加很多兼容性代码，不利于维护和解耦。

我建议还是在adapter层去支持吧，在window下面新增一个ImageBitmap的BOM API，具体不需要去实现什么，只要让小游戏里能访问到不是undefined就好了，不会影响threejs的功能。

如何修改和编译adapter的源码，课程中有讲到，回去看看。

千迦

莫大帅逼

在4-4

2018-12-12

共3条回复