폴리프레임

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

주요 클라스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

// 크로스 헤어let mousePosition = new THREE.Vector2();const crosshairs = new THREE.Group();crosshairs.position.z = -1;camera.add(crosshairs);const crossMaterial = new THREE.LineBasicMaterial({ color: 0xfffff,})const lineGeometry = new THREE.BufferGeometry();const lineVerts = [ 0, 0.05, 0, 0, 0.02, 0];lineGeometry.setAttribute("position", new THREE.Float32BufferAttribute(lineVerts, 3))for ( let i = 0..

three.js 2024. 10. 11. 20:08

let mousePosition = new THREE.Vector2();const crosshairs = new THREE.Group();crosshairs.position.z = -1;camera.add(crosshairs);const crossMaterial = new THREE.LineBasicMaterial({ color: 0xfffff,})const lineGeometry = new THREE.BufferGeometry();const lineVerts = [ 0, 0.05, 0, 0, 0.02, 0];lineGeometry.setAttribute("position", new THREE.Float32BufferAttribute(lineVerts, 3))for ( let i = 0; i mouse..

three.js 2024. 10. 11. 18:55

Three.js에서 카메라의 투영 행렬(projection matrix)을 갱신하는 역할을 합니다. 주로 카메라의 설정이 변경된 후, 그 변경 사항을 반영하여 화면에 정확하게 렌더링되도록 하기 위해 호출됩니다. 투영 행렬(projection matrix)이란?투영 행렬은 3D 공간의 객체들을 2D 화면에 어떻게 보여줄지를 결정하는 수학적 변환입니다. 카메라의 투영 행렬은 카메라의 화각(FOV), 종횡비(aspect ratio), 클리핑 평면(clipping planes) 등과 같은 카메라의 설정에 따라 만들어집니다.주로 사용되는 경우:화면 크기 변경: 창 크기나 캔버스 크기가 변경되면, 종횡비(aspect ratio)가 달라지므로 카메라의 aspect 속성을 수정한 뒤 updateProjectionMat..

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

Three.js에서 메쉬의 **법선 벡터(Normal Vector)**를 시각적으로 표현하는 재질(Material)입니다. 법선 벡터는 각 표면의 방향을 나타내며, MeshNormalMaterial은 이 벡터를 RGB 색상으로 변환하여 화면에 렌더링합니다. 주로 디버깅이나 시각적인 테스트를 위해 사용되며, 각 표면의 방향을 확인할 수 있습니다.const material = new THREE.MeshNormalMaterial(parameters);parameters: 옵션 객체로, 기본적으로 제공되는 속성(Property)을 수정할 수 있습니다. 이를 통해 재질의 기본적인 동작을 설정할 수 있습니다. 주요 속성은 다음과 같습니다. flatShading (기본값: false)면 단위로 평평한 음영을 적용할지..

three.js 2024. 9. 23. 21:38

AmbientLight는 Three.js에서 장면 전체에 고르게 퍼지는 전역 조명입니다. 이 조명은 모든 방향에서 균일하게 비추기 때문에 그림자를 생성하지 않으며, 주로 기본적인 조명 효과를 위해 사용됩니다. 다른 조명과 달리 AmbientLight는 3D 공간의 어느 위치에 있든 동일한 강도로 모든 오브젝트를 비추기 때문에, 오브젝트의 면에 따라 다른 밝기나 색상 변화는 발생하지 않습니다.// AmbientLight 생성const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 색상: 흰색, 강도: 0.5// 씬에 추가scene.add(ambientLight); 그러나, 다른 조명과 함께 사용할 때 더욱 유용합니다. AmbientLight는 전체적인..

three.js 2024. 9. 23. 20:12