학원생개발 홈.프로그램


	전체 \| 일반 (61) \| 자격 (7) \| 빙고 (0) \| 행사 (5) \| 경시 (2) \| 대학 (0) \| 타자 (85) \| 기업 (0) \| 어플 (16) \| 프로 (21) \| 기타 (11)


	웹 기반 3D 그래픽을 구현 테스트중 (관심있는 학생은 보세요~)

김희성

2023-06-13 14:53:09, 조회 : 8,348, 추천 : 1396

QR코드를 촬영하면 현재 페이지 내용을 볼 수 있습니다.

웹 기반 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

김*성

등록된 소개글(서명)이 없습니다.

	공지사항	★패스하자 암호★★★★★★★★★★★★★★ [1]	19.05.29	1499	4373
	공지사항	★구글크롬(엣지브라우저)실행시 광고 보이지 않도록 확장프로그램 설치 [2]	18.08.22	2033	9237
	공지사항	베스트컴퓨터학원 어플리케이션 개인정보처리방침 [1]	17.12.27	2139	17465
	공지사항	시작페이지변경하기 동영상강좌 (인터넷익스플로러, 크롬, 파이어폭스에서 원하는 사이트를 시작페이지로 변경하는 강좌입니다.) [1]	17.04.13	2159	8674
	공지사항	베스트컴퓨터학원 카페~비공개입니다.	16.05.02	0	2
	공지사항	한컴타자다운로드 [설치,사용 동영상 포함] - 블루소프트 타자 다운로드 사이트포함 [6]	16.01.05	2368	16539
	공지사항	한자의 훈, 음, 독음, 한자의 훈음, 한자의 음훈 이해하기? [1]	15.02.20	2283	22939
	공지사항	유투브동영상 다운로드	14.10.28	2364	10402
	공지사항	구글 번역기 추천 번역방식 소개 (한글-일본어-영어) [1]	14.02.09	2390	11050
	공지사항	모니터 밝기 체크 , 모니터 밝기 조절 , 모니터무결점, 모니터명암비, 모니터가독성, 모니터색상, 모니터응답속도, 모니터감마점검 [10]	14.02.08	2574	31295
	공지사항	베스트컴퓨터학원 토크 [5]	13.10.07	129	790
	공지사항	원격제어 프로그램 설치 (팀뷰어)-무설치	12.08.23	2093	23887
	공지사항	베스트컴퓨터학원,패스하자 QR코드 입니다. [3]	12.04.13	1328	6486
	공지사항	육하원칙 이란? [4]	12.03.13	1551	6829
	공지사항	인터넷 사기꾼 및 사기전화 조회 사이트입니다. [1]	09.11.20	1793	7311
	공지사항	정보 올림피아드 경시대회란? (공모부문, 경시부문, OA부문) [3]	08.02.22	1579	13815
	공지사항	이산수학이란.....?? [3]	08.02.22	1573	8157
191	타자	★80회 타자대회개최(한글부문)	26.05.11	196	346
190	타자	79회 설날 포인트 타자대회개최(한글부문)	26.02.09	357	663
189	타자	78회 타자대회개최(한글부문)	26.01.05	478	880
188	타자	77회 포인트 타자대회개최(한글부문)	25.11.24	546	968
187	일반	추천 윈도우10,11 단축키 (굿)	25.10.27	561	1004
186	타자	76회 타자대회개최(한글부문)	25.09.22	589	1060
185	타자	75회 포인트 타자대회개최(영어부문)	25.07.15	833	1546
184	기타	자바스크립트 강좌(게임혼합) 개발중(링크있음)	25.06.19	858	1469
183	타자	74회 타자대회개최(한글부문)	25.05.19	912	1770
182	타자	73회 타자대회개최(한글부문)	25.03.10	1063	1999
181	기타	사다리 타기 사이트 개발 공개~	25.01.24	1023	1823
180	타자	72회 포인트 타자대회개최(영어부문)	24.12.23	1265	2235
179	기타	홈페이지 이스터애그추가	24.12.16	1117	1907
178	타자	71회 타자대회개최(한글부문)	24.11.21	1328	2390
177	타자	70회 추석 타자대회개최(한글부문)(포인트)	24.09.13	1436	2340
176	프로	파이선코드를 웹 브라우저에서 실행하기	24.08.24	1288	2396
175	타자	69회 베스트러브1그룹 타자대회개최	24.08.12	1416	2407
174	타자	68회 타자대회개최(영어부문)(포인트)	24.06.10	1425	2469
173	기타	웹 화면에 영상 배경으로 하기 테스트 - 관심있는 학생들은 참고하세요.	24.05.31	1323	2154
172	타자	67회 베스트러브1그룹 타자대회개최	24.04.15	1456	2484
171	타자	66회 베스트러브1그룹 타자대회개최 [1]	24.01.29	1471	2560
170	타자	65회 타자대회개최(영어부문)(포인트)	23.12.11	1481	2590
169	프로	React(리엑트) 홈페이지 제작 과정 테스트중	23.12.03	1304	2360
168	타자	64회 베스트러브1그룹 타자대회개최	23.11.13	1471	2657
167	프로	학생 개발 SPACE BARS 테스트	23.09.21	1395	2557
166	타자	63회 타자대회개최(영어부문)(포인트)	23.08.28	1605	2746
165	타자	62회 베스트러브1그룹 타자대회개최	23.08.07	1602	2957
	기타	웹 기반 3D 그래픽을 구현 테스트중 (관심있는 학생은 보세요~)	23.06.13	1396	8348
163	타자	61회 베스트러브1그룹 타자대회개최	23.05.22	1597	2961
162	타자	60회 베스트러브1그룹 타자대회개최	23.03.06	1662	4674
161	타자	59회 타자대회개최 (설날 포인트)	23.01.16	1636	3306
160	타자	58회 베스트러브1그룹 타자대회개최	22.12.26	1709	3206
159	타자	57회 베스트러브1그룹 타자대회개최	22.10.26	1660	3390