微信小游戏中导入三维空间库——Three.js

分享下最近使用Three.js制作微信小游戏遇到的一些问题和解决方法

直接引用Three.js，会报错下图的错误

定位到makePowerOfTwo源码，把“|| image instanceof ImageBitmap”去掉即可，虽然没有报错，但因为不清楚代码逻辑，这么处理不太妥当。

function makePowerOfTwo( image ) {

            if ( image instanceof HTMLImageElement || image instanceof HTMLCanvasElement || image instanceof ImageBitmap ) {

            var canvas = document.createElement( 'canvas' );

                _canvas.width = _Math.floorPowerOfTwo( image.width );
                _canvas.height = _Math.floorPowerOfTwo( image.height );

                var context = _canvas.getContext( '2d' );
                context.drawImage( image, 0, 0, _canvas.width, _canvas.height );

                console.warn( 'THREE.WebGLRenderer: image is not power of two (' + image.width + 'x' + image.height + '). Resized to ' + _canvas.width + 'x' + _canvas.height, image );

                return _canvas;

            }

            return image;

        }

后来换用Three.min.js，之前的错误没有了，但还有新的错误

这个错误比较好解决，在weapp-adapter.js里，搜索createElement，在同样的位置加上以下方法：

createElementNS: function createElementNS(nameSpace, tagName) {
      return this.createElement(tagName)
    },

后面可以介绍下如何使用Three.js显示全景图片