Frontend/Three.js

재질, 텍스쳐 이미지 로드하기

텍스쳐가 있는 사이트에서 다운로드하기https://3dtextures.me/3d texture 구글에 검색해  원하는 텍스쳐 다운로드 하기  기본 예제 /* 텍스쳐 이미지 로드 */ const textureLoader = new THREE.TextureLoader(); const texture = textureLoader.load( "./textures/watermelon/Watermelon_001_basecolor.jpg" ); /* Messh 만들기 */ const geometry = new THREE.BoxGeometry(2, 2, 2); const material = new THREE.MeshStandardMaterial({ // color: 'orangered', ..

재질, side - Mesh의 앞 뒷면

Mesh의 앞 뒷면, side side 속성은 메시의 어느 면이 렌더링될지 결정하는 옵션이다. side는 메시의 앞면(front), 뒷면(back), 또는 양면(both)을 렌더링할 수 있도록 설정할 수 있다. 기본적으로는 앞면만 렌더링된다.  THREE.FrontSide (기본값)메시의 앞면만 렌더링한다.앞면은 메시의 노멀 벡터가 향하는 방향을 말하며, 일반적으로 메시의 바깥쪽이다.속도와 성능 면에서 유리하다.THREE.BackSide메시의 뒷면만 렌더링한다.메시의 노멀 벡터와 반대 방향을 향하는 면(일반적으로 안쪽)을 렌더링한다.때로는 내부를 볼 수 있는 특정한 효과나 필요한 시각적 연출을 위해 사용된다.THREE.DoubleSide메시의 앞면과 뒷면 모두를 렌더링한다.양면을 모두 렌더링하기 때문에,..

재질, flatShading - 각지게 표현

flatShading 속성  // MeshPhongMaterial, 상대적으로 덜 사실적 const material1 = new THREE.MeshPhongMaterial({ color: "orangered", shininess: 800, flatShading: true }); // MeshStandardMaterial, 고품질의 사실적인 렌더링 const material2 = new THREE.MeshStandardMaterial({ color: "orangered", roughness: 0.2, metalness: 0.3, flatShading: true }); flatShading 속성은 평면 셰이딩(Flat Shading)을 활성화할지 여부를 결정하..

재질, MeshStandardMaterial (MeshPhongMaterial과 비교)

MeshPhongMaterial와 MeshStandardMaterial 차이점 속성MeshPhongMaterialMeshStandardMaterial 렌더링 모델Blinn-Phong 쉐이딩 (전통적인 렌더링 방식)물리 기반 렌더링 (PBR, Physically Based Rendering)주요 속성- specular: 반사광 색상 및 강도 - shininess: 광택 정도- roughness: 표면 거칠기 - metalness: 금속성광택 표현shininess 속성으로 조정 가능roughness 속성으로 자연스러운 거칠기 표현금속성 표현지원하지 않음metalness 속성으로 금속성 표현 가능텍스처 맵 지원- map: 기본 컬러 맵 - bumpMap: 표면 굴곡 표현- map: 기본 컬러 맵 - rough..