Peter's hardware & software

결론부터 말하자면 공짜버전으로는 안돼~~~ 프리 버전인 스케치업 웹에서는 skp, png, stl 3가지 형태로 다운로드가 가능한데. 어차피 threejs에는 skp loader같은 건 없고 png는 그냥 이미지고 남는게 stl이야. 찾아봤더니 threejs에 stl loader는 있더라고 그래서 해봤는데 ㅎㅎ 잘 안돼. 먼저 이전에 만들어놓은 스케치업 모델 👆을 stl로 다운로드 했어. 그리고 threejs stlloader를 이용해서 로드해봤지. 어차피 안되는 거라 전체 코드는 올리지 않을게. gltfloader 참고하면 될 거 같아. gltfloader하고 방식은 거의 비슷한데 loader.load에서 onload함수에 전달되는 게 object가 아니라 geometry야. 그러니까 구조만 전달이..

gltf 오브젝트를 여러 개 로딩해볼려구. 화면 하나에 object 하나만 로딩하라는 법은 없잖아? 음 혹시나 서로 다른 형식의 object를 한 Scene에 로드할 수도 있고. 암튼 그래서 일단 똑같은 gltf 두개 로딩해볼거야. 특별한 건 없고 load() 대신 loadasync()를 Promiss.All에서 사용하면 간단하게 끝나. 아래 코드처럼. import React, { useEffect, useRef } from "react"; import * as THREE from "three"; import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import { OrbitControls } from "three/exampl..

2022.06.06 - [Next.js] - Next.js + three.js = 3d object 표현 Next.js + three.js = 3d object 표현 web page도 트렌드가 변할 것 같아서 미리 좀 공부해두는 건데.. 미리인건지는 잘 몰름 ㅋ 암튼 next.js 같은 웹 프레임워크 위에 three.js 사용하는 걸 좀 해보고 싶어서 시도해봤어. 물론 시작하기 전 engschool.tistory.com nextjs위에 3d object 표현하는 거 해봤는데 👆👆👆 왠지 마우스로 휘리릭 휘리릭 돌려보고 싶더라고 그래서 해봤지 ㅋ stack overflow를 헤매다가 이런 동작은 controls 라는 카테고리로 분류되어 있다는 걸 알았어. 그러면 고민하지 말고 threejs.org를 가보자..

web page도 트렌드가 변할 것 같아서 미리 좀 공부해두는 건데.. 미리인건지는 잘 몰름 ㅋ 암튼 next.js 같은 웹 프레임워크 위에 three.js 사용하는 걸 좀 해보고 싶어서 시도해봤어. 물론 시작하기 전에 검색을 좀 해보니 내가 좋아하는 유튜브 채널 애플코딩에서는 쌩 자바스크립트로 코드를 짜고 있었고 👇👇 https://www.youtube.com/watch?v=CojyGfCMvuU 아니면 @react-three/fiber ? 라는 모듈을 사용해서 하는 것도 있었는데 -_- 모듈 이름이 별로야~ 짝퉁같은 느낌이 들어서 안쓰고 해볼라고. ( 근데 검색해보니까 한 주에 다운로드가 10만이나 되네ㅋ 관리도 잘되는 거 같고 ㅎㅎㅎ 다음엔 이걸 써봐야겠어!) 암튼 그래서 애플 코딩에서 하는 걸 ne..