Frontend

카메라 컨트롤, TrackballControls

TrackballControls importimport { TrackballControls } from 'three/addons/controls/TrackballControls.js';Three.js 라이브러리에서 사용되는 입력 컨트롤 중 하나로, 웹에서 3D 그래픽을 다루기 위한 자바스크립트 라이브러리이다.사용자가 3D 장면을 자유롭게 회전, 확대/축소, 그리고 이동하면서 조작할 수 있다.마우스 드래그, 휠 스크롤 등을 통해 직관적으로 3D 환경을 탐색할 수 있도록 도와준다.  import * as THREE from "three";import { TrackballControls } from "three/examples/jsm/controls/TrackballControls";/* 주제: Trackba..

카메라 컨트롤, OrbitControls

OrbitControlsimport * as THREE from 'three';import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';// 기본적인 장면, 카메라, 렌더러 설정const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(re..

Geometry 형태 조작하기

SphereGeometryhttps://threejs.org/docs/index.html#api/en/geometries/SphereGeometrygeometry가 가진 각 각의 정점, 점들에게 접근해 위치를 바꿔 줄 수 있다.  VertexVertex는 3D 공간에서 한 점을 나타내는 개념const geometry = new THREE.SphereGeometry( 15, 32, 16 ); const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } ); const sphere = new THREE.Mesh( geometry, material ); scene.add( sphere );SphereGeometry(radius : Float, width..

여러가지 Geometry 살펴보기

OrbitControls사용자는 마우스나 터치 인터페이스를 사용해 3D 객체를 회전, 확대, 축소 및 팬(pan)할 수 있다.  주요 기능회전 (Orbit)사용자는 마우스를 드래그하여 카메라를 회전시킬 수 있다. 기본적으로 카메라는 타겟 객체를 중심으로 회전한다.줌 (Zoom)마우스 휠을 사용하여 카메라를 확대 및 축소할 수 있다. 터치 장치에서는 두 손가락으로 확대/축소 제스처를 사용할 수 있다.팬 (Pan)카메라를 수평 또는 수직으로 이동시킬 수 있다. 이는 오른쪽 마우스 버튼을 드래그하거나 터치 장치에서 두 손가락으로 드래그하여 수행할 수 있다.제한minDistance 및 maxDistance 설정을 통해 줌의 범위를 제한할 수 있다.minPolarAngle 및 maxPolarAngle로 카메라 회..