여러가지 Geometry 살펴보기

 

OrbitControls

사용자는 마우스나 터치 인터페이스를 사용해 3D 객체를 회전, 확대, 축소 및 팬(pan)할 수 있다.

 

 

주요 기능

1. 회전 (Orbit)
   • 사용자는 마우스를 드래그하여 카메라를 회전시킬 수 있다. 기본적으로 카메라는 타겟 객체를 중심으로 회전한다.
     
     
2. 줌 (Zoom)
   • 마우스 휠을 사용하여 카메라를 확대 및 축소할 수 있다. 터치 장치에서는 두 손가락으로 확대/축소 제스처를 사용할 수 있다.
     
     
     
3. 팬 (Pan)
   • 카메라를 수평 또는 수직으로 이동시킬 수 있다. 이는 오른쪽 마우스 버튼을 드래그하거나 터치 장치에서 두 손가락으로 드래그하여 수행할 수 있다.
     
     
     
4. 제한
   • minDistance 및 maxDistance 설정을 통해 줌의 범위를 제한할 수 있다.
   • minPolarAngle 및 maxPolarAngle로 카메라 회전의 수직 범위를 제한할 수 있다.
   • minAzimuthAngle 및 maxAzimuthAngle로 수평 회전 범위를 제한할 수 있다.
     
     
     
5. 자동 회전
   • autoRotate 옵션을 활성화하면 카메라가 자동으로 천천히 회전한다. 이 기능은 3D 객체를 정적으로 보여주고 싶을 때 유용하다.
     
     
     
6. 타겟 설정
   • target 속성을 통해 카메라가 회전하는 중심점을 설정할 수 있다.

 

 

import * as THREE from 'three';
// OrbitControls는 three.js 코어 모듈에는 포함되어 있지 않기 때문에 따로 import 해주기
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 카메라, 장면, 렌더러 설정
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 큐브 생성
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 카메라 위치 설정
camera.position.z = 5;

// OrbitControls 설정
const controls = new OrbitControls(camera, renderer.domElement);

// 애니메이션 루프
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // 필요에 따라 호출하여 컨트롤 업데이트
    renderer.render(scene, camera);
}

animate();

 

 

wireframe  : 표면이 실선으로만 표현

// 와이어프레임이 적용된 큐브 생성
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

 

 

이 속성을 활성화하면 3D 객체의 표면이 실선으로만 표현되며, 객체의 기본 색상은 유지되지만, 객체의 표면이 채워지지 않고 와이어프레임 형태로 렌더링 된다.

 

 

DoubleSide : 3D 객체의 표면이 양면에서 렌더링 되도록 지정하는 역할

// 더블사이드 재질이 적용된 평면 생성
const geometry = new THREE.PlaneGeometry(5, 5);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

 

 

side: THREE.DoubleSide 옵션을 사용하지 않을 경우

• 카메라를 통해 박스를 계속해서 줌인하면, 결국 박스의 내부로 들어가게 된다.
• 이때, 박스의 안쪽 면은 기본 설정상 렌더링 되지 않기 때문에 내부에서는 표면이 보이지 않는다.
• 결과적으로 박스 내부에서는 주변이 빈 공간처럼 보여, 박스가 사라진 것처럼 느껴진다.

 

 

side: THREE.DoubleSide 옵션을 사용한 경우

• material의 side 속성을 THREE.DoubleSide로 설정하면 박스의 안쪽 면도 렌더링된다.
• 따라서 카메라가 박스 내부로 들어가도 내부 표면이 보이며, 박스의 구조를 안쪽에서도 확인할 수 있다.
• 이는 현실 세계에서 상자의 내부를 보는 것과 유사한 시각적 효과를 제공한다.

 

 

BoxGeometry

Three.js 공식 문서_BoxGeometry

// Segments가 없는 모양
const geometry = new THREE.BoxGeometry( 1, 1, 1, 1); 

// Segments가 적용된 모양
const segmentedBox = new THREE.BoxGeometry(1, 1, 1, 16, 16, 16); // widthSegments, heightSegments, depthSegments 모두 4로 설정

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

 

 

Segment

• 세그먼트는 각 면(Width, Height, Depth)을 몇 개의 작은 구획으로 나눌지 지정한다.
• 기본적으로 BoxGeometry는 6개의 면(즉, 정육면체)을 가지고 있으며, 각 면은 하나의 사각형(2개의 삼각형)으로 구성된다.
• Segments 값을 높이면, 각 면이 더 많은 작은 사각형으로 세분화되며, 이를 통해 더 정교한 형태나 복잡한 기하학적 변형을 만들 수 있다.

 

 

기본

 

segments 값 :16