diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000000000000000000000000000000000000..f93450da0a463d0f82a6266d92dba7f68e91f14e --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 kihyun lee + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 5ee20c0f7de7f630e9855143bf6c26b3446cf5c3..e9376bf9b3d3499dcc714908eff7fecee28741fd 100644 --- a/README.md +++ b/README.md @@ -9,13 +9,21 @@ >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에 넣어서 매핑할 수 있습니다. @@ -24,26 +32,34 @@ const materials = [ >그리고 더 나아가 주변 환경이 비치도록 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 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 } ); +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 \ No newline at end of file +Html과 js가 익숙치 않아서 기말고사 끝나고 하려니 정말 어려워서 진전없는 시간이 많이 반복되었습니다. 특히 html을 제대로 다루지 못하는 탓에 시간이 더 많이 소모되었습니다. 그래서 제대로 된 결과물을 내지 못하여 너무 아쉬움이 많이 남습니다. 그래픽스를 배우면서 흥미로운 부분이 정말 많았고, 그만큼 어려웠던것 같습니다. 앞으로는 시간에 여유를 두고 하도록 하겠습니다. + +> 3d 이미지 출처 : https://3dtextures.me