조아마시

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

반응형

3D/threejs|R3F 5

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
반응형