threejs로 스케치업 stl 파일 로드하기 - 응~ 안돼~

결론부터 말하자면 공짜버전으로는 안돼~~~ 프리 버전인 스케치업 웹에서는 skp, png, stl 3가지 형태로 다운로드가 가능한데. 어차피 threejs에는 skp loader같은 건 없고 png는 그냥 이미지고 남는게 stl이야. 찾아봤더니 threejs에 stl loader는 있더라고 그래서 해봤는데 ㅎㅎ 잘 안돼.

회사 사무실 스케치업 모델

먼저 이전에 만들어놓은 스케치업 모델 👆을 stl로 다운로드 했어.

스케치업 모델 다운로드

그리고 threejs stlloader를 이용해서 로드해봤지. 어차피 안되는 거라 전체 코드는 올리지 않을게. gltfloader 참고하면 될 거 같아. gltfloader하고 방식은 거의 비슷한데 loader.load에서 onload함수에 전달되는 게 object가 아니라 geometry야. 그러니까 구조만 전달이 되고 색,재질 뭐 이런 정보는 없다는 소리겠지. 그래서 material을 만들고 그걸로 geometry에 합쳐서 새로운 mesh를 만들고 그걸 scene에 더하게 되는거지.

...
import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
...
    const loader = new STLLoader();
    ...
    loader.load("/office.stl", (geometry) => {
        const material = new THREE.MeshStandardMaterial({ color: 0x606060 });
        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
        const animate = () => {
          requestAnimationFrame(animate);
          renderer.render(scene, camera);
          controls.update();
        };
        animate();
    });
    ...
...

ㅎㅎ 그러면 결과가 아래와 같아. 👇👇 뭔가 로드가 되긴하는데 위에서 말한것처럼 억지로 matrial을 만들어 넣어서 물체 구분이 힘들뿐더러 오브젝트가 뒤집어져 있고 사이즈도 잘 가늠이 안되서 orbitalcontrols를 사용해서 카메라를 이리저리 돌려도 보는게 쉽지가 않아.

스케치업 stl 파일 threejs 로딩 결과.

나처럼 이런 실패를 맛보기 싫다면! 다음 사이트에서 먼저 테스트 해보자구 👉  https://threejs.org/editor/

three.js editor

그럼 아래와 같이 미리 오브젝트를 import해서 확인해볼 수 있어. ㅎㅎ 그런데 여러번 말하지마 뻘찟도 가치가 있어 ㅎ 즐길 수 있을 때 즐기라고 뻘찟! ㅋㅋㅋ

threejs/editor

아 그러면 스캐치업으로 만든 모델은 threejs로 보여주는 건 불가능할까? 그건 아닌거 같아. 스캐치업 내보내기에서 많은 포맷을 지원하고 있어. 그것들 중 하나는 되지 않겠어? 하지만 -_- 유료라는거... 가장 저렴한게 1년에 119불.. 15만원 정도.. 음 아까워!아까워!

스캐치업 내보내기 포맷

그래서 블랜더를 한번 해볼까해 ㅋㅋㅋㅋㅋ 미친놈이지 ㅋㅋㅋ 뭐 어때 ㅋㅋㅋ 해보자구 ㅋ 안녕!