Frontend

재질, 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..