GLTF Model & Canvas Texture - Black Background

[saranshgrover]

Hey all! Been stumped on this for a while now, hoping some of you have done this or a similar thing.

I'm trying to render a 2D Heatmap on top of a 3D Model of a Mattress that is loaded through useGLTF. The heatmap is created using simpleheat on a HTML5 Canvas. I have successfully been able to use CanvasTexture to map the heatmap on the material of the mattress, but the background of the mattress is now black (and I have tried countless ways to change it). Any help is appreciated!

Here is the code I'm at right now:

import { useGLTF } from '@react-three/drei'
import { useFrame, useThree } from '@react-three/fiber';
import { useRef, useLayoutEffect } from 'react';
import * as THREE from 'three'
import { useHeatmap } from '~/hooks/useHeatmap';

export function MattressModel(props) {
  const { nodes, materials } = useGLTF('/mattress/scene.gltf')
  const canvasRef = useRef(document.createElement("canvas"));
  const textureRef = useRef();
  const texture = useRef();
  const { gl } = useThree()
  const { add } = useHeatmap({ canvasRef, falloff: 50 })
  useFrame(() => {
    add()
    textureRef.current.needsUpdate = true;
  })
  useLayoutEffect(() => {

    const canvas = canvasRef.current;

    canvas.width = 1024;
    canvas.height = 1024;
    canvas.style.backgroundColor = '#ffffff'
    const context = canvas.getContext("2d");
    console.log(context)
    if (context) {
      texture.current = new THREE.CanvasTexture(canvas)
      texture.current.anisotropy = gl.capabilities.getMaxAnisotropy()
      texture.current.needsUpdate = true
      Object.assign(materials.Mattress, {
        map: texture.current,
      })
    }

  }, []);
  useFrame(() => {
    texture.current.needsUpdate = true
  })
  console.log(materials)
  return (
    <group {...props} dispose={null}>
      <group rotation={[1.57, 0, 0]}>
        <group rotation={[-Math.PI, 0, 0]} scale={0.01}>
          <group rotation={[Math.PI / 2, 0, 0]}>
            <mesh geometry={nodes.Bed_Frame_Bed_Frame_0.geometry} material={materials.Bed_Frame} />

          </group>
          <group rotation={[Math.PI / 2, 0, 0]}>
            <mesh
              onPointerEnter={(s) => {
                console.log(s)
              }} geometry={nodes.Mattress_Mattress__0.geometry} material={materials.Mattress} ref={textureRef} material-color={'#ffffff'}  />
          </group>
          <group rotation={[Math.PI / 2, 0, 0]}>
            <mesh geometry={nodes.Pillow__Pillow__0.geometry} material={materials.Pillow} />

          </group>
        </group>
      </group>
    </group >
  )
}

useGLTF.preload('/mattress/scene.gltf')

And here's what my model looks like: