Frontend/Three.js

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로 카메라 회..

그룹 만들기(Scene Graph)

태양과 지구와 달의 자전과 공전 움직임을 그룹을 이용해 만들어보기 box1 = 태양, box2 = 지구, box3 = 달지구가 자전하면서 지구는 태양을 두고 공전한다.달은 자기 자체도 자전, 자전을 하면서 지구 주의를 또 도는 공전  import * as THREE from "three";import dat from "dat.gui";/* 주제: 그룹 만들기(Scene Graph) */export default function example() { /* Renderer 만들기 : html에 캔버스 미리 만들기 */ const canvas = document.querySelector("#three-canvas"); const renderer = new THREE.WebGLRenderer({ ca..

회전

rotation// Three.js 필수 구성 요소 초기화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(renderer.domElement);// 큐브 생성const geometry = new THREE.BoxGeometry(); // 기본 1x1x1 크기의 박스const material = new T..