[THREE JS] scene 저장하기(feat. json)

scene을 통째로 저장하기

• 기존 3D object가 load 되어 있을 때
  (브라우저를 열자 마자 3D object가 바로 load 될 때)

• 즉 3D object를 내가 가지고 있을 때는 [localStorage]를 사용 해서 해당 3D object의 (position/scale/color) 정도의 값만 저장시키면 되었다.

• 하지만 [localStorage]는 용량의 제한 5,10MB(문자열만) 이 있어서 [scene]자체를 전부 저장하기가 어렵다.

• 그래서 localStorage대신 찾아보니 [IndexedDB]를 사용하면 된다고 한다. 용량의 제한은 따로 없다고 한다!

참고 자료
https://pks2974.medium.com/indexeddb-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-ca9be4add614

문제점

↓바로 indexedDB에 Scene값을 넣어보니 error가 발생하였다.

객체를 복사 할 수 없다고 나오는데 문자열 형태의 값들을 넣었을 때 오류가 나지 않는점에서 JSON화를 시켜야한다고 생각을 했다.
🤣검색해도 원인이 제대로 나오지 않았다...🤣

• 제일 중요한 점
  [IndexedDB]에 저장 할 때 [Scene]자체를 저장하는 점이며 그 [Scene]을 [Json]형태로 저장하는데 JSON.parse() 또는 JSON.stringify() 둘 중 하나만 사용해야 하는 줄 알고 그렇게 썼는데...
  내가 원하던 형태로 나오지 않았다.

JSON.stringify = 객체를 JSON 문자열로
JSON.parse = JSON 문자열을 객체로

↑위의 사진처럼 나오지 않고
↓아래 사진 처럼만 나오는 것 이었다.

바보같이 JSON.parse() 와 JSON.stringify()를 동시에 사용하면 되는데 사고가 유연하지 못했다.

const scene = new THREE.Scene();
// scene의 값들을 json 문자열로 변환
let sceneProperties = JSON.stringify(scene, null, 3)
// JSON 문자열을 객체로
let jsonScene = JSON.parse(sceneProperties)
console.log(jsonScene)

이런식으로 해주면 값을 가져 올 수 있다!

하지만 indexed DB를 사용 할 일이 없어져서...중단