Failed to execute 'texImage2D' on 'WebGLRenderingContext'. Error while creating canvas texture

Question

Im loading a glTF shirt object. I want to wrap text around the sleeve and for that i have created a mesh on top of the sleeve using blender. Now i have created a canvas texture on that mesh and tried to render text but it does not seem to be working. It gives the following error.

Here's my code.

loadModel(model, callback) {
        this.loader = new GLTFLoader();
        this.loader.setCrossOrigin('anonymous');
        this.loader.load(model, (gltf) => {
            if (typeof callback === 'function') {
                callback(gltf.scene);
            }

            this.scene.add(gltf.scene);
        });
    }

loadModel() {
            this.isLoaded = false;

            this.scene.loadModel('model10/V Shirt text.gltf', (model) => {
                model.name = 'shirt';
                
                // Iterator through the model's children
                model.traverse((child) => {
                    if (child instanceof THREE.Mesh) {
                        // reset original material
                        child.material.map = null;
                        if (child.name = 'Text') {
                            let canvas = document.createElement('canvas');
                            canvas.height = 100;
                            canvas.width = 100;
                            let context = canvas.getContext('2d');
                            context.fillStyle = 'black'
                            context.font = '100pt Helvetica'
                            context.fillText('Hello', 10, 90);
                            const texture = new THREE.CanvasTexture(context);
                            const material = new THREE.MeshBasicMaterial({
                                map: texture
                            })
                            child.material.map = texture;
                            child.material.map.needsUpdate = true;
                        }
                        // create wireframes
                        // this.createWireframe({ mesh: child });

                        // console.log(child)
                        // push to local array
                        this.objects.push(child);
                    }
                });

Mugen87 · Accepted Answer · 2021-03-03 15:48:52Z

1

const texture = new THREE.CanvasTexture(context);

Canvas textures are created like so:

const texture = new THREE.CanvasTexture(canvas);

So you don't pass the rendering context but the canvas itself.

answered Mar 3, 2021 at 15:48

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Failed to execute 'texImage2D' on 'WebGLRenderingContext'. Error while creating canvas texture

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related