Three.JS
-
[Three.JS] Transmission ?Three.JS 2023. 12. 31. 15:11
Transmission 을 사용하면 오브젝트 뒤의 있는 물체를 볼수있다 그렇다면 단순 투명도인가? ㄴㄴ alpha랑 다르게 transmission 은 적용된 물체의 형태에 따라 뒤에 있는 물체를 왜곡시켜보이게함 그러니 더욱 사실적인 효과를 내줄수있는것 동영상에서 thickness가 제대로 안보임 왜냐면 코드가 잘못되어있었음 min 0 max 1 로 바꿔주고 다시 //Transmission material.transmission = 1 material.ior = 1.5 material.thickness = 0.5 gui.add(material, 'transmission'). min(0). max(1). step(0.0001) gui.add(material, 'ior'). min(1). max(10). st..
-
[THREE.JS} Clearcoat?Three.JS 2023. 12. 31. 14:44
pbr 머티리얼하다보면 자꾸 보이던clearcoat 클리어코트는 무엇인가.. 실제 머티리얼위에 얇은 반사속성이 있는 레이어를 시뮬레이션하는것이라고함 clearcoat 값이 올라가면 뭔가 반질반질해지는느낌이있는데 roughness랑 비슷한 무엇인가라고만 알고있었지 이렇게 자세히는 몰랐지뭐람......? 암튼 그래서 얇게 코팅한 반질반질한 막 효과를 준다고한다. 그래서 그 밑에있는 머티리얼들이 클리어코트 레이어 밑으로 보임. 유리막같은것을 한겹 씌워준것이라고 이해하면됨. //Clearcoat material.clearcoat = 1 material.clearcoatRoughness=0 클리어코트 두줄 스크립트를 넣어보니 문이 유리막아래에 갇힌듯한 느낌 gui.add(material, 'clearcoat')...
-
[THree.JS] MeshToonMaterialThree.JS 2023. 12. 31. 01:40
내가 젤 궁금했던! 셀쉐이딩 머티리얼 //MeshToonMaterial const material = new THREE.MeshToonMaterial() gradientTexture.minFilter = THREE.NearestFilter gradientTexture.magFilter = THREE.NearestFilter gradientTexture.generateMipmaps = false 툰쉐이딩 머티리얼 그라디언트 텍스쳐를 사용해서 const gradientTexture = textureLoader.load('./textures/gradients/3.jpg') 불러와 사용할수있는데 //MeshToonMaterial const material = new THREE.MeshToonMaterial() ..
-
[Three.JS] MeshLambertMaterialThree.JS 2023. 12. 31. 01:22
//MeshLambertMaterial const material = new THREE.MeshLambertMaterial() MeshLambertMaterial은 빛을 사용하는 머티리얼 중 가장 효율적인 가성비넘치는 머티리얼임 그치만 약간 쉐이딩이 어색함 그리고 조절이 어려움 빛을 사용하는 머틸리얼이니 당연히 ambient light 와 point light 추가해서사용해주자 /** * Lights */ const ambientLight = new THREE.AmbientLight(0xffffff, 1) scene.add(ambientLight) const pointlight = new THREE.PointLight(0xffffff,30) pointlight.position.x=2 pointlight...
-
[Three.JS] MipMapping 때문에 발생하는 텍스쳐 blur 현상Three.JS 2023. 12. 29. 23:38
대부분 텍스쳐와 렌더러 크기 차이에서 발생? minfilter : 큰 텍스쳐를 작게 줄일때 사용 magfilter: 작은 텍스쳐를 크게 확대할때 사용 (magifying glass에서 따온듯) 사용법 colorTexture.minFilter = THREE.NearestFilter 이거나 // colorTexture.magFilter = THREE.NearestFilter 이거를 텍스쳐에 넣어줌 둘중 한개만쓸것 당연함 ㅇㅇ 둘이 반대의역할으하니까 colorTexture.generateMipmaps = false colorTexture.minFilter = THREE.NearestFilter // colorTexture.magFilter = THREE.NearestFilter 중요! min filter안에서..
-
[Three.JS] 그룹 안에 오브젝트 추가해서 씬에 넣기Three.JS 2023. 12. 27. 14:03
const group = new THREE.Group() scene.add(group) const cube1 = new THREE.Mesh( new THREE.BoxGeometry(1,1,1), new THREE.MeshBasicMaterial({color:0xff0000}) ) group.add(cube1) const group으로 그룹생성 scene.add(group) scene.add로 그룹을 씬에 추가 const cube1=new THREE.Mesh( new Three.BoxGeometry(1,1,1), new Three.MeshBasicMaterial({ color : 0xff0000 }) ) group.add(cube1) 결과 이제 큐브2를 추가해봄 const cube2 = new THREE...