Threejs3D Code Play

Threejs3D 코드 플레이는 코드를 편집하고 그 결과를 인터랙티브 3D 장면으로 확인하면서 Three.js를 학습할 수 있도록 도와줍니다. 예제를 살펴보고 HTML과 JavaScript를 수정한 다음 앱에서 실행해 보세요.

실행 장면을 통해 학습

학습 실험과 미리 정의된 애니메이션 장면을 통해 99개의 예제를 탐색해 보세요. 도형, 재질, 조명, 카메라부터 시작하여 파티클, 셰이더, 상호 작용까지 살펴보세요. 더 큰 규모의 학습을 원할 때는 태양계, 파도, 또는 애니메이션 추상 장면을 시도해 보세요.

다섯 가지 학습 경로는 기초, 기하학, 색상 및 조명, 모션, 그리고 창작 워크숍으로 구성되어 있습니다. 학습을 완료하면 표시하고, 다음 경로로 이동하고, 유용한 예제를 즐겨찾기에 추가하고, 최근에 열었던 장면으로 돌아갈 수 있습니다.

편집, 실행 및 검토

코드 편집기에서 예제를 열거나 Three.js 가져오기가 이미 포함된 새 프로젝트를 시작할 수 있습니다. 구문 강조 표시, 실행 취소 및 다시 실행, 찾기 및 바꾸기, 특정 줄로 이동 기능을 사용하여 작업하세요. 실행 미리보기로 전환하면 현재 코드를 확인하고 콘솔 메시지 또는 오류를 검사할 수 있습니다.

드래그하여 회전하고 손가락으로 확대/축소하여 번들로 제공되는 장면 미리보기를 탐색하세요. 라이브 컨트롤을 지원하는 장면의 경우, 색상, 애니메이션 속도, 조명, 형상, 단색 또는 그라데이션 배경을 탐색할 수 있습니다. 사용 가능한 컨트롤은 장면에 따라 다릅니다.

실험 저장

이름이 지정된 프로젝트를 저장하고 '내 프로젝트'에서 다시 열 수 있습니다. HTML 파일을 열어 기존 작업을 계속 편집하거나, '다른 이름으로 저장'을 사용하여 별도의 사본을 저장할 수 있습니다.

프로젝트를 HTML 또는 ZIP 파일로 내보내거나 공유할 수 있습니다. 내보내기에는 Three.js 라이브러리가 포함되며, 사용자 지정 외부 자산은 외부에 유지됩니다. ZIP 파일의 압축을 풀고 해당 폴더를 HTTP를 통해 제공하면 앱 외부에서 프로젝트를 열 수 있습니다.

배경화면 애니메이션

필요한 네이티브 지원이 있는 호환 Android 기기에서 애니메이션 장면을 시스템 라이브 배경화면 미리보기로 보내고 거기서 선택을 확정할 수 있습니다. 사용 가능한 배경화면 위치는 기기에 따라 다릅니다.

이 앱은 간단한 실험을 통해 3D 코딩을 연습하려는 학생, 취미 활동가 및 웹 개발자를 위해 제작되었습니다. 번들로 제공되는 예제는 로컬 라이브러리를 사용하며, 사용자 지정 원격 리소스 및 광고는 인터넷 액세스가 필요할 수 있습니다. 이 앱에는 광고가 포함되어 있습니다.