조아마시

쓸모 있는 상세페이지 만들기

반응형

3D 8

Node Geometry

Node Geometry의 개념과 활용"Node Geometry"는 그래픽, 3D 모델링, 데이터 구조 등 다양한 분야에서 사용됩니다. 여기서는 가장 많이 사용되는 주요 개념을 중심으로 설명하겠습니다.1. 3D 그래픽 및 프로시저 모델링에서 Node Geometry1.1. Geometry Nodes (Blender)Blender의 Geometry Nodes는 노드 기반 시스템을 사용하여 모델을 생성, 변형, 조합할 수 있는 기능입니다.✅ 주요 개념프로시저 모델링: 수동 조작 없이 매개변수를 변경하여 자동으로 기하학적 구조를 생성함.비파괴적 편집: 원본 지오메트리를 변경하지 않고 여러 개의 노드를 조합하여 새로운 모델을 생성함.재사용 가능성: 한 번 만든 노드 그래프를 여러 프로젝트에서 활용할 수 있음.✅..

3D 2025.03.17

ARKit vs ARCore 비교

ARKit vs ARCore vs WebXR 비교항목 ARKit ARCore WebXR개발사AppleGoogleW3C (Web 표준)지원 OSiOS (iPhone, iPad)Android & 일부 iOS모든 OS (웹브라우저 기반)플랫폼네이티브 앱 (iOS)네이티브 앱 (Android, 일부 iOS)웹브라우저 (크로스 플랫폼)주요 언어Swift, Objective-CKotlin, Java, C++, Unity (C#)JavaScript, WebGL, WebAssembly설치 필요 여부앱 설치 필요앱 설치 필요웹브라우저에서 즉시 실행 (설치 불필요)센서 활용LiDAR, TrueDepth 카메라RGB 카메라, Depth API기본 카메라 및 가속도계, 자이로스코프공간 매핑고급 공간 매핑 (LiDAR 지원)환..

3D 2025.03.17

[웹3D] WebXR - 웹 브라우저에서 가상 현실(VR) 및 증강 현실(AR) 환경을 제공하는 기술

WebXR 기술 개요WebXR(Web Extended Reality)은 웹 브라우저에서 가상 현실(VR) 및 증강 현실(AR) 환경을 제공하는 기술입니다. WebXR API를 활용하면 추가적인 애플리케이션 설치 없이 웹 기반으로 XR(Extended Reality) 콘텐츠를 구현할 수 있습니다.WebXR의 주요 특징웹 브라우저 기반 실행별도 앱 없이 웹사이트에서 XR 콘텐츠 제공 가능크로스플랫폼 지원 (PC, 모바일, VR/AR 기기)가상 현실(VR) 및 증강 현실(AR) 동시 지원VR: Meta Quest, HTC Vive, Windows Mixed Reality 등AR: ARKit(iOS), ARCore(Android) 등과 연동자유로운 하드웨어 연동6DoF(6 Degrees of Freedom) 지..

3D 2025.03.17

Three.js에서 주전자(Teapot) 모델을 렌더링

Three.js에서 주전자(Teapot) 모델을 렌더링하는 예제를 제공합니다. Three.js 자체에는 기본적인 주전자 모델이 없지만, Three.js에서 지원하는 TeapotGeometry를 사용하거나, 외부 .glb 또는 .obj 모델을 로드하는 방식으로 구현할 수 있습니다.📌 방법 1: TeapotGeometry 사용 (외부 라이브러리 필요)Three.js의 TeapotGeometry는 기본 라이브러리에 포함되지 않으므로, **three/examples/jsm/geometries/TeapotGeometry.js**를 불러와야 합니다. import { TeapotGeometry } from 'https://threejs.org/examples/jsm/geometries/T..

3D/threejs|R3F 2025.02.14

Three.js를 사용하여 도형을 시각화

Three.js를 사용하여 도형을 시각화하는 코드를 제공하겠습니다. 아래는 **2D 및 3D 도형(삼각형, 사각형, 원, 육면체, 구, 원기둥)**을 Three.js로 렌더링하는 코드입니다.기능2D 도형: 삼각형, 사각형, 원3D 도형: 정육면체, 구, 원기둥Three.js를 사용하여 WebGL로 렌더링코드아래는 Three.js를 사용하여 웹에서 실행할 수 있는 코드입니다. // Three.js 초기 설정 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); c..

3D/threejs|R3F 2025.02.14

[R3F] Geometries 종류

기본 Geometries직육면체 모양을 만듭니다.속성: width, height, depth, widthSegments, heightSegments, depthSegments.2D 평면을 만듭니다.속성: width, height, widthSegments, heightSegments.원 모양을 만듭니다.속성: radius, segments, thetaStart, thetaLength.구 모양을 만듭니다.속성: radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength.원뿔 모양을 만듭니다.속성: radius, height, radialSegments, heightSegments, openEnded, thetaSta..

3D/threejs|R3F 2025.01.15

[Three.js] Global variable

const REVISION = '172'; // Three.js의 현재 버전 번호// 마우스와 터치 이벤트를 처리하는 상수들const MOUSE = { LEFT: 0, // 마우스 왼쪽 버튼 MIDDLE: 1, // 마우스 휠 클릭(가운데 버튼) RIGHT: 2, // 마우스 오른쪽 버튼 ROTATE: 0, // 마우스 회전 동작 DOLLY: 1, // 줌 동작 PAN: 2 // 이동 동작}; const TOUCH = { ROTATE: 0, // 터치 회전 동작 PAN: 1, // 터치 이동 동작 DOLLY_PAN: 2, // 줌 + 이동 동작 DOLLY_ROTATE: 3 // 줌 + 회전..

3D/threejs|R3F 2025.01.15
728x90
반응형