Update README.md

README.md

+# 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