728x90 반응형 threejs2 [React] 리액트로 Three.js 작업하기 기본 (3D 박스 구현) 내가 까먹을까봐 쓰는 Three.js 리액트 작업 순서 VSCODE 실행하고 터미널을 열어 npx create-react-app my-app 리액트 프로젝트를 설치한다. (my-app 부분을 내 프로젝트 이름으로 대체) 나는 대충 문서 폴더에 threejs라는 프로젝트를 생성했다. cd 프로젝트명 명령어를 통해 프로젝트 폴더로 이동해준다. 터미널에 npm start를 입력해 로컬 서버를 켠다. 익숙한 리액트 로고 등장 작업 준비완 이제 리액트로 three를 설치하면 된다. https://threejs.org/docs/index.html#manual/en/introduction/Installation three.js 작업에 필수적인 document. 설치법이 나와있다. 아래의 명령어들로 THREE와 THR.. 2022. 7. 25. [Javascript] THREE.JS 3D 정육면체에 여러 이미지 적용하기 (textureLoader) 완성본 요새 THREE.JS의 사용법을 익히고 있다. 나는 3D 오브젝트를 소환하고 간단한 환경 수정 정도만 할 수 있는 초보인데 한가지 이미지의 텍스쳐가 아닌 정육면체를 6가지 이미지로 맵핑(+컨트롤 가능)을 하라는 미션이 떨어졌다. 직장인은 안되도 되게 해야한다. three.js의 예제를 뒤져보자 https://threejs.org/examples/#webgl_geometry_cube 그나마 비슷한 샘플을 찾았다. 하지만 한 개의 나무 이미지 텍스쳐만 쓰였다는 것을 육안으로 그리고 코드로 알 수 있다. ..이게 아냐 구글링 갈겨~~~ 출처: https://r105.threejsfundamentals.org/threejs/lessons/threejs-textures.html 발견! three.js 예제.. 2022. 7. 22. 이전 1 다음 728x90 반응형
