폴리프레임

WebGLRenderer와 CSS3DRenderer는 Three.js에서 사용하는 두 가지 주요 렌더링 방식으로, 각각의 특성과 용도가 다릅니다. WebGLRenderer기능: WebGLRenderer는 WebGL API를 사용하여 3D 그래픽을 렌더링합니다. WebGL은 GPU 가속을 통해 빠르고 성능이 뛰어난 3D 그래픽을 제공합니다1.용도: 주로 복잡한 3D 모델, 텍스처, 라이팅, 셰이더 등을 사용하는 3D 애플리케이션에 사용됩니다.성능: 높은 성능과 품질의 3D 그래픽을 제공합니다.CSS3DRenderer기능: CSS3DRenderer는 CSS를 사용하여 HTML 요소를 3D 공간에 표시합니다. 이를 통해 HTML 요소를 3D 객체처럼 보이게 할 수 있습니다1.용도: 주로 텍스트, UI 요소, ..

three.js 2024. 11. 21. 12:37

lookAt() 메서드는 월드 좌표계에서 특정 위치를 지정하여 카메라의 시선이 해당 위치를 바라보도록 설정합니다.기본값이라고 할 수 있는 초기 상태는 별도로 존재하지 않습니다. 그러나 일반적으로 카메라가 생성된 초기 상태에서는 Z축의 음의 방향을 바라봅니다.const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);// 초기 상태에서 camera는 (0, 0, 0)을 바라보지 않음console.log(camera.position); // Default: (0, 0, 0)console.log(camera.lookAt); // 초기값: 정의되지 않음// 명시적으로 설정camera.positi..

three.js 2024. 11. 21. 12:26

performance는 자바스크립트에서 내장된 객체로, 성능 측정과 관련된 고해상도 시간을 제공하는 API를 지원합니다. performance 객체는 생성자 함수가 아니라, 브라우저 환경에서 전역적으로 사용 가능한 내장 객체입니다.performance 객체의 주요 메서드now(): 성능 측정을 위한 고해상도 타임스탬프를 반환합니다. 이 메서드는 밀리초 단위로 시간 값을 반환하며, 매우 정밀한 타이밍 측정이 가능합니다.const startTime = performance.now();// 작업 수행const endTime = performance.now();console.log(`작업 시간: ${endTime - startTime} 밀리초`);memory: 사용 가능한 메모리 정보에 대한 객체를 반환합니다...

JavaScript 2024. 11. 21. 12:01

TrackballControls는 Three.js 라이브러리에서 카메라의 이동, 회전, 확대/축소 등의 제어를 쉽게 할 수 있게 도와주는 컨트롤 클래스입니다. 마우스와 터치를 이용하여 3D 장면을 탐색할 수 있도록 해줍니다. TrackballControls를 사용하면 카메라를 자유롭게 움직이며 3D 모델을 관찰할 수 있습니다.주요 기능rotate: 마우스를 드래그하여 카메라를 회전시킵니다.zoom: 마우스 휠을 사용하여 카메라를 확대/축소합니다.pan: 마우스를 드래그하여 카메라를 이동시킵니다.reset: 초기 상태로 되돌립니다.import * as THREE from 'three';import { TrackballControls } from 'three/examples/jsm/controls/Track..

three.js 2024. 11. 21. 11:39

TWEEN은 Three.js 라이브러리에서 제공하는 클래스로, 애니메이션을 쉽게 만들기 위해 사용됩니다. TWEEN을 사용하면 객체의 속성을 시간에 따라 부드럽게 변화시킬 수 있습니다. 주로 페이드 인, 페이드 아웃, 슬라이드, 회전 등의 애니메이션을 구현할 때 유용합니다. 주요 기능Tween.js: Three.js의 일부로 제공되며, TWEEN.Tween와 TWEEN.TweenGroup 클래스를 포함합니다.TWEEN.Tween: 개별 객체의 속성을 애니메이션화하는 클래스입니다.TWEEN.TweenGroup: 여러 개의 TWEEN.Tween을 그룹화하여 관리할 수 있는 클래스입니다.import { TWEEN } from 'three';// 원본 이미지 요소 선택const image = document.q..

three.js 2024. 11. 21. 11:30

cloneNode()는 DOM (Document Object Model) API의 메서드 중 하나로, 호출된 노드를 복제하여 반환합니다. 이 메서드는 특히 이미지와 같은 요소를 복제할 때 유용합니다. cloneNode() 메서드에는 선택적 매개변수로 깊은 복사를 지정할 수 있습니다. // 원본 이미지 요소 선택const originalImage = document.querySelector('img');// 이미지 요소 복제const clonedImage = originalImage.cloneNode(true); // true는 깊은 복사를 의미합니다// 복제된 이미지 요소를 DOM에 추가document.body.appendChild(clonedImage);매개변수deep (선택적): Boolean 값을..

JavaScript 2024. 11. 21. 10:40

주요 클라스1. CSS3DRendererCSS3DRenderer는 Three.js에서 제공하는 렌더링 클래스로, HTML 요소를 3D 공간에 표시할 수 있게 합니다. 주로 3D 모델과 함께 텍스트나 UI 요소를 표시할 때 사용됩니다2. CSS3DRenderer는 다음과 같은 주요 메서드를 가지고 있습니다:setSize(width, height): 렌더의 크기를 설정합니다.render(scene, camera): 3D 장면을 렌더링합니다.domElement: 렌더의 컨테이너 요소를 반환합니다.2. CSS3DSpriteCSS3DSprite는 CSS3DRenderer와 함께 사용되는 클래스로, HTML 요소를 3D 공간에서 회전하거나 이동할 수 있게 합니다. CSS3DSprite는 CSS3DObject의 하위..

three.js 2024. 11. 21. 10:26

HTMLCollection과 NodeList는 모두 DOM 요소의 목록을 나타내지만, 중요한 차이점이 몇 가지 있습니다.특 성HTMLCollectionNodeList생성 메서드getElementsByTagname, getElementsByClassName,childen 등querySelectorAll,childNodes동적갱신여부DOM 변화에 즉시 반영기본적으로 DOM 변화에 반영되지 않음노드 유형Element 노드만 포함모든 노드(텍스트, 주석 등 포함 가능)반복 지원배열 변환 후 forEach 메서드 지원forEach 메서스 지원 예제 1. HTMLCollection Item 1 Item 2 Add Item  items는 HTMLCollection이기 때문에 DOM이 변경될 때..

JavaScript 2024. 11. 5. 21:22