분류 전체보기

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

각 면에 다른 텍스쳐 넣기 /* 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..

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

텍스쳐가 있는 사이트에서 다운로드하기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', ..