몰입형 3D 논 웹사이트

브라우저에서 실행되는 몰입형 3D 논 웹사이트를 제작하세요. 테마는 다음과 같습니다: “초록의 바다 / 논 사이로 부는 바람” 코드를 완성하고, 필요한 의존성을 설치한 뒤 미리보기를 실행하세요. 제안이나 구현 계획만 제시하고 멈추지 마세요. 1. 비주얼 방향 전체적인 분위기는 자연스럽고 평온하며 세련되어야 합니다. 일관된 아트 디렉션을 갖춘 인터랙티브 풍경 웹사이트처럼 느껴지게 하세요. 장면에는 다음 요소를 포함하세요: 전경: 가느다란 잎, 휘어진 줄기, 아래로 살짝 처진 벼 이삭 몇 개가 뚜렷하게 구분되어야 합니다. 중경: 충분한 밀도와 자연스러운 간격 변화를 지닌 논이 먼 곳까지 이어져야 합니다. 배경: 불규칙한 나무선, 겹겹이 펼쳐진 낮은 구릉, 은은한 대기 원근감을 배치하세요. 하늘: 부드러운 회청색 계열과 미묘한 구름 변화를 사용하고, 지평선에서 자연스럽게 이어지도록 하세요. 기본 카메라는 벼 이삭보다 약간 높은 위치에 두고, 들판 너머 먼 구릉을 바라보도록 설정하세요. 화면의 약 3분의 1은 하늘이 차지하고, 나머지 구성에서는 논이 중심이 되도록 하세요. 식생 색상은 주로 짙은 녹색, 올리브 그린, 옐로 그린을 사용하세요. 형광 녹색은 피하세요. 벼의 높이, 방향, 휘어짐, 색상을 자연스럽게 다양화하세요. 2. 애니메이션 요구 사항 바람은 들판을 가로질러 옆으로 이동하는 연속적인 파동처럼 보여야 합니다. 뿌리는 대부분 고정하고, 잎 끝과 이삭으로 갈수록 움직임이 점진적으로 커지게 하세요. 같은 영역의 식물은 서로 일관되게 움직이되, 개체별 차이는 유지해야 합니다. 느리고 큰 규모의 바람 파동에 미묘한 국소적 흔들림을 더하세요. 모든 식물이 완벽하게 동시에 흔들리게 만들지 마세요. 식물 전체를 통째로 이동시키거나 잎이 깜빡이게 하지 마세요. 기본 바람은 장시간 바라봐도 편안한 정도로 부드럽게 설정하세요. 3. 인터랙션 요구 사항 장면에 실제로 영향을 주는 간단한 컨트롤을 제공하세요. 바람 세기 슬라이더: 바람 애니메이션의 세기와 속도를 부드럽게 조절하세요. 조명 모드: 아침, 오후, 골든 아워를 제공하세요. 하늘, 광원 방향, 색온도, 안개 색상이 함께 바뀌도록 조정하세요. 뷰 모드: 탁 트인 들판과 논 사이를 제공하고, 카메라가 부드럽게 전환되도록 하세요. 일시정지/재생: 환경 애니메이션을 일시정지하고 다시 재생할 수 있게 하세요. 마우스 움직임에 따라 카메라가 아주 미세하게 반응하도록 할 수 있지만, 어지럼증을 유발해서는 안 됩니다. 기본 상태에서 카메라가 큰 각도로 계속 회전하지 않도록 하세요. 4. 인터페이스 디자인 전체 화면 장면 위에 인터페이스를 오버레이로 배치하세요. 왼쪽 상단: 작은 VERDANT 워드마크. 왼쪽 하단: 세리프체 제목 “초록의 바다.” 그 아래에 작은 부제 “할 일은 없어요. 그저 바람을 따라가세요.” 오른쪽 하단: 반투명한 짙은 녹색의 компакт한 컨트롤 패널. 텍스트는 읽기 쉽게 유지하고 여백을 넉넉히 두세요. 컨트롤이 주요 풍경을 가리지 않도록 하세요. 좁은 화면에서도 컨트롤이 겹치지 않고 사용할 수 있어야 합니다. 5. 기술 및 성능 Three.js를 사용하세요. 기존 프로젝트가 있다면 현재의 빌드 환경을 유지하세요. 대량의 식생을 처리할 수 있도록 인스턴싱과 GPU 버텍스 애니메이션을 사용하세요. 식물마다 별도의 드로 오브젝트를 만들거나 매 프레임 모든 식물을 CPU에서 업데이트하지 마세요. 거리가 멀어질수록 식생 디테일을 줄이고, 적절한 픽셀 비율 상한을 적용하세요. 에셋 로딩의 안정성을 위해 프로시저럴 지오메트리와 머티리얼을 우선 사용하세요. 장면은 실시간으로 렌더링되어야 합니다. 전체 풍경 이미지나 동영상을 메인 장면으로 사용하지 마세요. 모델 이름과 비교 라벨은 후반 작업에서 추가할 예정이므로 장면에 포함하지 마세요. 6. 완료 기준 구현이 끝나면 사용 가능한 브라우저 도구로 다음을 확인하세요. 초기 뷰가 올바르게 렌더링되고, 눈에 띄는 콘솔 오류가 없어야 합니다. 모든 컨트롤이 실제로 장면에 영향을 주어야 합니다. 전경, 중경, 배경의 깊이와 레이어가 뚜렷하게 구분되어야 합니다. 벼가 단순히 곧게 선 녹색 선으로만 보이지 않아야 합니다. 바람의 움직임은 뚜렷한 균일 반복 없이 연속적이고 자연스러워야 합니다. 카메라 전환은 부드러워야 하며, 좁은 화면에서도 인터페이스를 사용할 수 있어야 합니다. 특정 항목을 확인할 수 없다면 그 사실을 명확히 밝히세요. 마지막으로 시작 방법과 실제로 구현한 기능의 요약을 제공하세요.