https://velog.io/@3436rngus/R3FReact-Three-Fiber-Material

Ambient Occlusion Map : 메쉬 표면에 이미 만들어둔 그림자 맵 (메쉬의 입체감을 더 살릴 수 있다)ambient light 를 설정해주어야 적용 가능하다 / geometry 에 uv2 코드를 추가해주어야한다메테리얼에 aoMap = {textures.aoMap} 으로 설정한다 alpha map : 투명도를 조정할 수 있다 검정색으로 갈 수록 투명해지고, 흰색으로 갈 수록 불투명해진다 (포토샵의 mask 기능과 유사) 광원 / proceduer material / 성능차이 -> 모델의 차이를 불러일으킴

import * as THREE from "./three.module.js"; import { OrbitControls } from './three/examples/jsm/controls/OrbitControls.js'; export default function example() { // Create a scene, camera, and renderer 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(win..

1. camera.position.set(x, y, z) 2. camera.rotation.set(z, y, x) 카메라 position / rotation의 set값에 들어가는 값이 각각 다르다 camera.position.set은 x (좌우) y (상하) z (앞뒤) 값이지만 camera.rotation.set은 z (yaw / heading) : z축을 기준으로 좌우방향으로의 회전 y (pitch / attitude) : y축을 기준으로 상하방향으로 회전 x (roll / bank) : x축을 기준으로 차체나 물체의 좌우기울임, roll각은 비행기 날개가 좌우로 기울어지는 동작 tip : camera.rotation 값을 숫자로 / x, y, z 순서대로 적고싶을 때 var euler = new T..

cos, sin함수를 사용해서 x, z 좌표를 설정하는 이유 card.position.x = 1 * Math.cos(angle); card.position.z = 1 * Math.sin(angle); 원의 중심을 기준으로 일정 각도만큼 거리가 떨어져 있기 때문이다. 각도가 중요하지 않고 거리만 사용할거면 그냥 상수 써도 되는데 45도씩 증가 + 이동하면서 카드가 배치되어 있기 때문에 cos, sin 함수를 이용한다 card.position.y = 1 * Math.tan(angle); position y값을 설정할 때에는 tan를 사용한다 오답노트 이번 모델링에게 각도를 부여했는데 원하는대로 되지 않았음. 카드가 모두 앞면을 바라보게 설정되어있었는데, 시계바늘처럼 배치하고 싶은 경우 각각의 카드에 다른 값..

Performance Optimization (성능 최적화) Geometry Merging: 여러 개의 작은 지오메트리 대신 하나의 큰 지오메트리로 병합함으로써 draw call을 줄일 수 있습니다. LOD (Level of Detail): 카메라에서 멀리 떨어진 객체는 상세 수준을 줄여 렌더링합니다. Three.js는 이를 위한 THREE.LOD 클래스를 제공합니다. Culling: 화면 밖의 객체는 렌더링하지 않습니다. 이는 Three.js가 자동으로 수행하지만, 추가적인 제어가 필요한 경우 직접 구현할 수도 있습니다. Texture & Material Optimization: 불필요하게 큰 텍스처나 복잡한 재질을 사용하면 성능에 영향을 줄 수 있습니다. 텍스처 크기를 적절하게 조절하고 필요한 경우 ..