카테고리 없음
[ 3D 배경 ] threejs.org
bay07
2024. 8. 16. 16:05
Three.js – JavaScript 3D Library
threejs.org
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/assets/leadme_favicon-CIrVr03B.png">
<title>LeadMe</title>
<script type="module" crossorigin="" src="/assets/index-BldvMU8f.js"></script>
<link rel="stylesheet" crossorigin="" href="/assets/index-BB1AZFP5.css">
<style data-styled="active" data-styled-version="6.1.11"></style>
</head>
<body style="overflow: initial;">
<div id="root">
<div class="sc-blKHAk cduTeP">
<div id="canvas" style="position: relative; width: 100%; height: 100%; overflow: hidden; pointer-events: auto;">
<div style="width: 100%; height: 100%;">
<canvas data-engine="three.js r166" width="727" height="922" style="display: block; width: 581.6px; height: 737.6px;"></canvas>
<div style="position: absolute; width: 100%; height: 100%; overflow: hidden auto; top: 0px; left: 0px;">
<div style="position: sticky; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden;">
<div style="position: absolute; top: 0px; left: 0px; will-change: transform;">
<div class="sc-iGgVNO ebekCS" style="opacity: 1;">
<div class="sc-gsFSjX lbbawX">
<h1 class="sc-kAycRU heXIoq rajdhani-semibold">LeadMe</h1>
</div>
</div>
<div class="sc-iGgVNO ebekCS" style="opacity: 1;">
<div class="sc-kpDprT ftBLhZ">
<h2 class="sc-imWZod dcvFmA">쇼츠 영상 제작을 더욱 쉽게</h2>
<p class="sc-jXbVAB dsYGBY">평소 따라 하고 싶던 유튜브 쇼츠 영상을 손쉽게 배워보세요!</p>
</div>
</div>
<div class="sc-iGgVNO ebekCS" style="opacity: 0;">
<div class="sc-dhKdPU dtAPRo">
<h2 class="sc-imWZod dcvFmA">나의 챌린지 점수는?</h2>
<p class="sc-jXbVAB dsYGBY">AI 기반 분석 레포트를 제공해드려요!</p>
</div>
</div>
<div class="sc-iGgVNO ebekCS height-4" style="opacity: 0;"></div>
<div class="sc-iGgVNO ebekCS" style="opacity: 0;">
<button class="sc-dAlxHm hWcQNy">START</button>
</div>
</div>
</div>
<div style="height: 800%; width: 100%; pointer-events: none;"></div>
</div>
</div>
</div>
<div id="fixed" class="sc-jlZhRR giBcDn" style="display: none;">
<h2>친구와 챌린지 배틀까지</h2>
<p>친구와 실시간으로 춤 배틀을 펼쳐보세요!</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm/vision_wasm_internal.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm/vision_wasm_internal.js" crossorigin="anonymous"></script>
</body>
</html>
HTML 구조
<html lang="en">: 문서의 언어를 영어로 설정합니다.
<head>: 문서의 메타데이터가 포함됩니다.
<meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 반응형 디자인을 지원하여 모바일 장치에서 적절하게 보이도록 합니다.
<link rel="icon" href="/assets/leadme_favicon-CIrVr03B.png">: 브라우저 탭에 표시될 아이콘을 설정합니다.
<title>LeadMe</title>: 문서의 제목을 설정합니다.
<script type="module" crossorigin="" src="/assets/index-BldvMU8f.js"></script>: JavaScript 모듈을 포함합니다. 이 스크립트는 문서의 기능을 제공합니다.
<link rel="stylesheet" crossorigin="" href="/assets/index-BB1AZFP5.css">: CSS 스타일 시트를 포함합니다.
<style data-styled="active" data-styled-version="6.1.11"></style>: 이 스타일 태그는 동적으로 생성된 스타일을 포함할 수 있습니다.
<body style="overflow: initial;">: 문서의 본문이 포함됩니다.
<div id="root">: 주요 컨텐츠가 포함된 루트 엘리먼트입니다.
<div class="sc-blKHAk cduTeP">: 스타일이 적용된 컨테이너입니다.
<div id="canvas" style="position: relative; width: 100%; height: 100%; overflow: hidden; pointer-events: auto;">: 전체 페이지를 차지하는 캔버스 컨테이너입니다.
<canvas>: 3D 그래픽을 렌더링하는 캔버스 요소입니다. (Three.js 라이브러리 사용)
<div>: 다양한 스타일이 적용된 내부 레이어입니다.
<div class="sc-iGgVNO ebekCS" style="opacity: 1;">: 다양한 섹션을 포함합니다.
<h1 class="sc-kAycRU heXIoq rajdhani-semibold">LeadMe</h1>: 제목 "LeadMe"를 표시합니다.
<h2 class="sc-imWZod dcvFmA">쇼츠 영상 제작을 더욱 쉽게</h2>: 서브 제목과 설명을 포함합니다.
<p class="sc-jXbVAB dsYGBY">평소 따라 하고 싶던 유튜브 쇼츠 영상을 손쉽게 배워보세요!</p>: 추가적인 설명입니다.
<button class="sc-dAlxHm hWcQNy">START</button>: 사용자 인터페이스의 버튼입니다.
<div id="fixed" class="sc-jlZhRR giBcDn" style="display: none;">: 숨겨진 엘리먼트로, 특정 조건에서 표시될 수 있습니다.
스크립트:
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm/vision_wasm_internal.js" crossorigin="anonymous"></script>: MediaPipe Vision API를 로드하는 스크립트입니다. 이 API는 컴퓨터 비전 기능을 제공합니다.
요약
이 HTML 문서는 LeadMe라는 웹 애플리케이션의 기본 구조를 정의합니다. 스타일과 기능을 제공하는 외부 CSS 및 JavaScript 파일을 포함하며, MediaPipe Vision API를 이용한 비주얼 처리를 위한 스크립트도 포함되어 있습니다. Three.js 라이브러리를 사용하여 3D 그래픽을 렌더링하는 캔버스 요소가 포함되어 있으며, 사용자는 UI 버튼을 통해 상호작용할 수 있습니다.