three.js
-
[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...
-
[Three.JS] Transform (Scale, Position, Rotate) 과 Quarternion, lookat카테고리 없음 2023. 12. 27. 10:58
//Scale mesh.scale.x =2 mesh.scale.y=0.5 mesh.scale.z=0.5 오브젝트의 크기를 조절하는것 scale 이렇게하거나 mesh.scale.set(2,0.5,0.5) 이렇게 한번에 set으로 한줄로 설정해도됨 x는 좌우로움직이고 y는 위아래로 z는 앞뒤로움직임. 뭔가 ㅇㄹㄷㅅ 때 움직이는 그 좌표값이네..? 블렌더는 z가 위아래, y가 앞뒤인것이 다르다 하지만 이것은 직접 설정해서 바꿀수있다고함 뭐야 더어렵자나요.. 그냥 외울래요.. mesh.position.x=0.7 mesh.position.y=-0.6 mesh.position.z=1 포지션역시 이렇게하거나 mesh.position.set(0.7, -0.6, 1) 이렇게 둘다가능한~~ 로테이션은 PI를 응용할수있다 ..
-
[Three.JS] 이거까지 해야하다니??Three.JS 2023. 12. 27. 10:05
이건 프론트엔드 영역아닌가.. 하 참나 근데 겨ㅛㄹ과물이 멋져서 해보고싶어지긴 함 참나 나란인간 ... 웹으로 3d 띄우는거 어떻게하는건데...... 약간 배우다보니 아주아주 옛날 초딩3학년때쯤 웹에디터 혼자 배워보다가 java script 찍먹했던 내모습이 떠오름 그거랑 비슷한데?(물론 기억 희미하고 물론 훨씬 어려움 완전 새로배우는느낌) 설치하는거에 애먹다가 결국 유료강의결제함 threejs-journey.com 에서 구글링으로 찾아낸 30%쿠폰먹이려고했는데 먹이는곳이 어딘지몰라서 그냥 생돈내고 할인없이 결제됨 ㅠ 눈물흘리며 메일보내니 쿠폰도 새로주고 취소도해준다고함 환불승인 기다리다가 카드 승인취소 기다리는시간아까워서 그냥 일단 바로 결제 다시했음 이렇게 매번 겉만 핥고 찍먹만 해보다가 영영 깊이있..