Importing 3D space library into WeChat mini-game——Three.js

Share some problems and solutions recently encountered in using Three.js to make WeChat mini-games

Directly refer to Three.js, the error in the figure below will be reported.

Locate the makePowerOfTwo source code and remove "|| image instanceof ImageBitmap". Although no error is reported, it is not appropriate to handle it because the code logic is not clear.

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;

        }

Later, I switched to Three.min.js, the previous error is gone, but there are new errors.

This error is easier to solve. In weapp-adapter.js, search for createElement, and add the following method in the same position:

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

Later, we can introduce how to use Three.js to display panoramic pictures