전체 글

재질, MeshToonMaterial(만화 느낌)

MeshToonMaterial셰이딩이 간소화된 스타일을 표현하기 위해 사용한다.셀 셰이딩(cell shading)이라고도 불린다.일반적인 조명 효과를 단순화하여 만화 같은 스타일을 만들어 준다.  MeshToonMaterial의 주요 속성color재질의 기본 색상을 지정한다.gradientMaptoon 효과의 색상 단계를 설정할 수 있는 텍스처를 지정한다.이를 통해 원하는 음영 단계를 직접 설정할 수 있다.shininess반사광의 강도를 설정한다.lightMap / lightMapIntensity추가 조명 효과를 위한 텍스처를 설정할 수 있다.emissive / emissiveIntensity발광 효과를 추가하여 물체가 빛을 내는 것처럼 보이게 할 수 있다.bumpMap, normalMap세부적인 질감을..

재질, 여러 이미지 텍스쳐가 적용된 큐브

각 면에 다른 텍스쳐 넣기 /* 6개의 텍스쳐 이미지 로드 */ // 주의 : webpack.config.js파일 CopyWebpackPlugin에서 textures의 경로 설정이 되었는지 체크하기 const textureLoader = new THREE.TextureLoader(loadingManager); const rightTexture = textureLoader.load("/textures/mcstyle/right.png"); const leftTexture = textureLoader.load("/textures/mcstyle/left.png"); const topTexture = textureLoader.load("/textures/mcstyle/top.png"); const b..

재질, 텍스쳐 변환

THREE.RepeatWrapping텍스처를 물체에 적용할 때 사용되는 래핑 모드 중 하나이다.텍스처가 물체의 UV 좌표를 벗어날 경우 텍스처가 반복되어 적용되게 한다.wrapS는 수평, wrapT 수직 방향으로 반복되도록 설정하는 것이다.텍스쳐의 offset, repeat 등 변환을 줄 때 THREE.RepeatWrapping 적용하기   텍스쳐 기준 가운데로 잡기.../* 텍스쳐 변환 */// 텍스처가 물체의 UV 좌표를 벗어날 경우 텍스처가 반복되어 적용되게 한다.texture.wrapS = THREE.RepeatWrapping;texture.wrapT = THREE.RepeatWrapping;// 위치 이동texture.offset.x = 0.3;texture.offset.y = 0.3;// 반..

재질, 로딩 매니저(여러개의 텍스쳐 이미지)

로딩 매니저텍스처를 로드할 때 LoadingManager를 사용하여 로딩 상태를 관리하는 방법이다.이를 통해 로딩 진행 상태를 모니터링하고, 모든 리소스가 성공적으로 로드되었는지 확인할 수 있다.   const loadingManager = new THREE.LoadingManager();loadingManager.onStart = () => { console.log("로드 시작");};loadingManager.onProgress = (img) => { console.log(img + " 로드");};loadingManager.onLoad = () => { console.log("로드 완료");};loadingManager.onError = () => { console.log("에러");};co..