ReferenceError: ImageBitmap is not defined

Question

在 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

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

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

Answer 1

千迦 2018-10-10 00:27:11

看了一下，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的源码，课程中有讲到，回去看看。

• 提问者 JaxChu #1

  非常感谢！赞！

• 莫大帅逼 #2

  老师 修改和编译adapter的源码，是在哪一章

• 千迦 回复 莫大帅逼 #3

  在4-4

Answer 2

慕容9431294 2019-01-03 12:21:17

我也遇到了这个问题，谢谢解释!!!!

Answer 3

千迦 2018-10-09 23:47:09

问题看到了，我理解一下，然后答复