wam
w__am 개발노트
wam
  • 분류 전체보기 (165)
    • CS 지식 (10)
      • 자료구조 (0)
      • 알고리즘 (0)
      • 컴퓨터 구조 (0)
      • 운영체제 (0)
      • 네트워크 (7)
      • 데이터베이스 (0)
      • 디자인 패턴 (3)
    • Frontend (131)
      • Three.js (64)
      • NPM (1)
      • Nest.js (19)
      • React (10)
      • Apollo (7)
      • TypeScript (2)
      • JavaScript (12)
      • HTML, CSS (1)
      • Jest (3)
      • E2E (5)
      • Cypress (7)
    • Database (12)
      • TypeORM (12)
    • IT 지식 (8)
      • 클라우드 서비스 (3)
      • 네트워크 (1)
      • 데이터 포맷 (2)
      • 기타 (2)
    • IT Book (2)
    • 유용한 사이트 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 🐱 Github

인기 글

태그

  • 삼각함수
  • 초기 환경설정
  • getelapsedtime()
  • Interface
  • 렌더링 성능 최적화
  • 디자인 패턴
  • reactive variables
  • 함수 선언문
  • axeshelper
  • gridhelper
  • joi 에러
  • Decorators
  • 함수 표현식
  • isabstract
  • e.preventdefault()
  • math.sin()
  • API
  • 오프-프레미스(off-premise) 방식
  • type-graphql
  • math.cos()
  • getdelta()
  • three.js 구성 요소
  • 함수 리터럴
  • react 성능 최적화
  • 함수의 범위
  • threejs 개발 할 때 도움을 줄 수 있는 유틸리티
  • mapped types
  • 원형적인 움직임
  • 스코프
  • 데이터 포맷

최근 글

관리자

글쓰기 / 스킨편집 / 관리자페이지
hELLO · Designed By 정상우.
wam

w__am 개발노트

카메라 컨트롤, FlyControls
Frontend/Three.js

카메라 컨트롤, FlyControls

2024. 9. 4. 17:06

 

FlyControls

 

Three.js에서 제공하는 카메라 제어 도구 중 하나로, 자유롭게 3D 공간을 비행하듯이 움직일 수 있게 해 준다. 이 컨트롤은 주로 3D 환경을 탐색하거나, 특정 경로에 구애받지 않고 카메라를 이동해야 하는 상황에서 유용하다.

 

 

import * as THREE from "three";
import { FlyControls } from "three/examples/jsm/controls/FlyControls";

/* 주제: FlyControls */

export default function example() {
  /* Renderer 만들기 : html에 캔버스 미리 만들기 */
  const canvas = document.querySelector("#three-canvas");
  const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

  /* Scene 만들기 */
  const scene = new THREE.Scene();

  /* Camera 만들기 */
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.y = 1.5;
  camera.position.z = 7;
  scene.add(camera);

  /* Light 만들기 */
  const ambientLight = new THREE.AmbientLight("white", 0.5);
  scene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight("white", 1);
  directionalLight.position.x = 1;
  directionalLight.position.z = 2;
  scene.add(directionalLight);

  /* Controls 만들기 */
  const controls = new FlyControls(camera, renderer.domElement);
  // controls.rollSpeed = 0.1;
  // controls.movementSpeed = 3;
  controls.dragToLook = true;

  /* Messh 만들기 */
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  let mesh;
  let material;

  const minColorValue = 50; // RGB 값의 최소값
  const colorRange = 255 - minColorValue; // RGB 값의 범위 (최대값 - 최소값)
  for (let i = 0; i < 20; i++) {
    material = new THREE.MeshStandardMaterial({
      color: `rgb(
				${minColorValue + Math.floor(Math.random() * colorRange)},
				${minColorValue + Math.floor(Math.random() * colorRange)},
				${minColorValue + Math.floor(Math.random() * colorRange)}
			)`
    });

    // Mesh 무작위 위치 조정
    const range = 0.5;
    const positionRange = 5;
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.x = (Math.random() - range) * positionRange;
    mesh.position.y = (Math.random() - range) * positionRange;
    mesh.position.z = (Math.random() - range) * positionRange;
    scene.add(mesh);
  }

  /* 그리기 */
  const clock = new THREE.Clock();

  function draw() {
    const delta = clock.getDelta();
    // update함수에 delta값을 넣어줘야 한다.
    controls.update(delta);

    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
  }

  function setSize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);
  }

  /* 이벤트 */
  window.addEventListener("resize", setSize);

  draw();
}

 

 

조작법

  • 기본 조작은 방향키를 사용
    • 방향 조절 WSAD
    • 회전 Q, E
    • 카메라 이동 R, F
  • 마우스 조작은 왼쪽은 앞으로 오른쪽은 뒤로 움직인다.

 

 

속성

  • rollSpeed 마우스 위치에 따라 회전
  • movementSpeed 마우스 클릭에 따라 앞, 뒤 속도 조절
  • dragToLook true로 설정하면 마우스 움직임 반응하지 않고 드래그로만 움직인다.

 

 

저작자표시 변경금지 (새창열림)

'Frontend > Three.js' 카테고리의 다른 글

카메라 컨트롤, PointerLockControls  (0) 2024.09.05
카메라 컨트롤, FirstPersonControls  (0) 2024.09.05
카메라 컨트롤, OrbitControls와 TrackballControls 차이  (0) 2024.09.04
카메라 컨트롤, TrackballControls  (0) 2024.09.04
카메라 컨트롤, OrbitControls  (0) 2024.09.03
    'Frontend/Three.js' 카테고리의 다른 글
    • 카메라 컨트롤, PointerLockControls
    • 카메라 컨트롤, FirstPersonControls
    • 카메라 컨트롤, OrbitControls와 TrackballControls 차이
    • 카메라 컨트롤, TrackballControls
    wam
    wam

    티스토리툴바