웹 기반 3D 그래픽을 구현 테스트중
테스트 웹페이지 (내용이 궁금한 학생은 선생님에게 문의하세요)
리눅스(우분투 18.04) + Three.js + Node.js + html
정육면체 회전
1) http://bestcomsv.cafe24.com/exercise/threejs/index1.html
키보드 이동
2) http://bestcomsv.cafe24.com/exercise/threejs/index2.html
★ 강좌 진행 ★
1) 정육면체 회전
http://bestcomsv.cafe24.com/exercise/threejs/threejs_01.html
2) 조명주기(이전예제사용)
http://bestcomsv.cafe24.com/exercise/threejs/threejs_02.html
3) 마우스로 보는 방향 결정하기(이전예제사용)
http://bestcomsv.cafe24.com/exercise/threejs/threejs_03.html
4) 마우스 스크롤바로 확대 축소하기(이전예제사용)
http://bestcomsv.cafe24.com/exercise/threejs/threejs_04.html
5) 캔버스 크기 지정후 화면가운데 출력(이전예제사용)
http://bestcomsv.cafe24.com/exercise/threejs/threejs_05.html
6) 캔버스 위치 변경 출력(이전예제사용)
http://bestcomsv.cafe24.com/exercise/threejs/threejs_06.html
7) W(위)X(아래)A(왼쪽)D(오른쪽) 키보드 선택시 정육면체 이동하기( 카메라 이동, 이동범위 많을 경우 왜곡현상발생)( 4)예제사용)
http://bestcomsv.cafe24.com/exercise/threejs/threejs_07.html
8) W(위)X(아래)A(왼쪽)D(오른쪽) 키보드 선택시 정육면체 이동하기(★바닦평면 추가★, 정육면체, 카메라이동)(★레드브릭처럼이동★)(이전예제사용)
http://bestcomsv.cafe24.com/exercise/threejs/threejs_08.html
9) 마우스 스크롤바 사용시 내가 원하는 동작 주기(현재 예제에서는 회전함)( 4)예제사용)
http://bestcomsv.cafe24.com/exercise/threejs/threejs_09.html
10) ★모바일, PC반응형★ 모바일 화면 터치시 회전가능, 화면아래 버튼(PC접속시 숨김) 선택시 확대, 축소 되도록 추가(4단원에서 마우스클릭 회전, 스크롤 확대 축소가능)(모바일에서 사용)( 4)예제사용)
http://bestcomsv.cafe24.com/exercise/threejs/threejs_10.html
★ Three.js란?
Three.js는 웹 기반 3D 그래픽을 구현하기 위한 JavaScript 라이브러리입니다. 리눅스에서 Three.js를 사용하려면 다음과 같은 요소들을 설치해야 합니다:
Node.js: Three.js를 사용하기 위해 Node.js가 필요합니다. Node.js는 JavaScript 실행 환경을 제공하며, 패키지 관리자인 npm을 통해 Three.js를 설치하고 관리할 수 있습니다. Node.js를 설치하려면 공식 웹사이트(https://nodejs.org)에서 다운로드하고 설치할 수 있습니다.
웹 브라우저: Three.js는 웹 기반 그래픽을 위해 WebGL을 사용합니다. 따라서 Three.js로 개발한 애플리케이션을 실행하기 위해서는 WebGL을 지원하는 최신 웹 브라우저가 필요합니다. 주로 Google Chrome, Mozilla Firefox, Microsoft Edge 등을 사용할 수 있습니다.
Three.js 라이브러리: npm을 통해 Three.js를 설치해야 합니다. 프로젝트 디렉토리에서 터미널을 열고 다음 명령어를 실행하여 Three.js를 설치합니다:
Copy code
npm install three
이 명령어는 Three.js 라이브러리와 관련된 종속성을 프로젝트 디렉토리에 설치합니다.
이렇게 하면 리눅스에서 Three.js를 사용할 준비가 됩니다. 추가적으로 개발 환경에 따라 코드 편집기나 개발 서버 등을 설정해야 할 수도 있습니다.
참고강좌 사이트
https://horangi.tistory.com/406
https://velog.io/@chloeee/3-Three.js%EB%9E%80
https://threejs.org/docs/#manual/en/introduction/Useful-links
threejs 한국사이트
https://threejs.org/docs/#manual/ko/introduction/Loading-3D-models
https://66651.tistory.com/366?category=473766
obj파일도 참고
https://velog.io/@whdnjsdyd111/Three.js-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0-1
https://66651.tistory.com/376?category=473766
★3d객체 불러오기 강좌
https://joonhwan2.github.io/posts/threejs/
★예제 작품과 작품 오른쪽 하단 선택하면 코드 공개되어있음
https://threejs.org/examples/#webgl_animation_keyframes
3D 다운로드 (threejs 에서는 gltf 파일사용)
https://sketchfab.com/
회원 가입후 다운로드가능
아래 사용시 라이선스 표기 해야함
Model Information:
* title: Buster Drone
* source: https://sketchfab.com/3d-models/buster-drone-294e79652f494130ad2ab00a13fdbafd
* author: LaVADraGoN (https://sketchfab.com/lavadragon)
Model License:
* license type: CC-BY-NC-4.0 (http://creativecommons.org/licenses/by-nc/4.0/)
* requirements: Author must be credited. No commercial use.
If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
This work is based on "Buster Drone" (https://sketchfab.com/3d-models/buster-drone-294e79652f494130ad2ab00a13fdbafd) by LaVADraGoN (https://sketchfab.com/lavadragon) licensed under CC-BY-NC-4.0 (http://creativecommons.org/licenses/by-nc/4.0/)
https://sketchfab.com/3d-models/buster-drone-294e79652f494130ad2ab00a13fdbafd?ref=gltf_page
stl 무료 다운로드
https://www.thingiverse.com/
stl파일 gltf 변환사이트
https://products.aspose.app/3d/ko/conversion/stl-to-gltf
https://miconv.com/ko/gltf-pail-byeonhwan/
★ Three.js로 만든 사이트
https://jesse-zhou.com/
https://moments.epic.net/
★다양한작품소개 : https://threejs.org/
https://threejs.org/examples/#webgl_animation_keyframes
https://codesandbox.io/s/youthful-mestorf-2pcis?from-embed
★웹 포트폴리오에 3D 모델을 추가해보자 (Three.js)
https://www.youtube.com/watch?v=CojyGfCMvuU
|
|
|
|