[THREEJS] localStorage에 image(base64)저장하기

문제점

threejs에서 GLB/GLTF에 Texture로 내가 원하는 이미지 파일을 넣은 뒤 localStorage에 저장하고 해당 페이지에 다시 접속 했을 때 해당 이미지가 Texture로 저장이 안됨

해결방법

1. localStorage에 저장하는 방법

localStorage.[localStorage에 저장 될 key값] = JSON.stringify({
	// value값
    ex) position: x,y,z
    // 이런 식으로 저장하면
    F12 -> Application에 Key Value로 저장 되어 있음
})

2. localStorage에서 불러오는 방법

const example = JSON.parse(localStorage.getItem(위에서 저장한 key값))
if(example){
obj.position.copy(example.position)
}

3. image(base64) 저장하기
   먼저 Texture를 GLB/GLTF에 로드 시키면 어디에 저장되는지 확인하기
   나의 3D모델의 경우

object3D.children[0].children[0].material.map.source.data.currentSrc

에 base64 정보가 저장 되는 것을 확인
-> 이 정보를 localStorage에 저장하기

localStorage.[localStorage에 저장 될 key값] = JSON.stringify({
	objMap: object3D.children[0].children[0].material.map.source.data.currentSrc
})

-> 이 정보를 localStorage에서 불러오기

    if( example ){
          if ( object3D.children[0].children[0].isMesh ) {
            let object3DImg = new Image()
            object3DImg.src = example.objMap
            object3D.children[0].children[0].material.map.copy(new THREE.Texture(object3DImg))
          }
      }

여기서 가장 중요한 부분!

new Image() 이 부분!!
며 칠 동안 이 부분을 추가 하지 않아서 image(base64)가 undefined 로 나왔었다.

정말 간단하지만 해결하는데 오래 걸렸다!