diff --git a/README.md b/README.md index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0bda35c13b788c32629aee0ca0d64773e2fb41c7 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,49 @@ +# Final Project - CG + + 2022년도 1학기 F013-1, 아주대학교 + 201820798 이기현 + + +## Cube Texture mapping basic + +>THREE.BoxGeometry는 각 면에 대해 다른 텍스쳐 맵핑을 지정할 수 있습니다. + +const loader = new THREE.TextureLoader(); +const materials = [ + new THREE.MeshBasicMaterial({ map: loader.load("flower-1.jpg") }), + new THREE.MeshBasicMaterial({ map: loader.load("flower-2.jpg") }), + new THREE.MeshBasicMaterial({ map: loader.load("flower-3.jpg") }), + new THREE.MeshBasicMaterial({ map: loader.load("flower-4.jpg") }), + new THREE.MeshBasicMaterial({ map: loader.load("flower-5.jpg") }), + new THREE.MeshBasicMaterial({ map: loader.load("flower-6.jpg") }), +]; + +>이와 같이 박스에 텍스쳐를 입히려면 사진을 Loader에 넣어서 매핑할 수 있습니다. + + +>그리고 더 나아가 주변 환경이 비치도록 Reflection 을 이용할 수도 있습니다. + +const path = 'https://raw.githubusercontent.com/tamani-coding/threejs-texture-maps/main/dist/Metal_Tiles_003_'; + const urls = [ + path+'ambientOcclusion.jpg', path+'basecolor.jpg', + path+'metallic.jpg', path+'metallic.jpg', + path+'normal.jpg', path+'roughness.jpg' + ]; + + const reflectionCube = new THREE.CubeTextureLoader().load( urls ); + scene.background = reflectionCube; + const material1 = new THREE.MeshPhongMaterial( + { color: 0x00ffff, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.5 } ); + const material2 = new THREE.MeshLambertMaterial( + { color: 0xffffff, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.5 } ); + const material3 = new THREE.MeshLambertMaterial( + { color: 0xffff00, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.5 } ); + +> 여기서 반사가 얼마나 되는지 조절하려면 reflectivity를 수정하면 됩니다. +> envMap를 reflectionCube로 설정했기에 반사를 활용할 수 있습니다. + + +## 느낀점 +Html과 js가 익숙치 않아서 기말고사 끝나고 하려니 정말 어려워서 진전없는 시간이 많이 반복되었습니다. 그래서 제대로 된 결과물을 내지 못하여 너무 아쉬움이 많이 남습니다. 그래픽스를 배우면서 흥미로운 부분이 정말 많았고, 그만큼 어려웠던것 같습니다. + +> 3d 이미지 출처 : https://3dtextures.me