3D/Three.js
-
Three.js 재질별 material 속성 정리3D/Three.js 2024. 8. 15. 22:17
Three.js 재질별 material 속성 정리플라스틱: metalness: 0, roughness: 0.2 ~ 0.4const plasticMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, // 원하는 색상 metalness: 0, roughness: 0.3,});메탈: metalness: 1, roughness: 0 ~ 0.3const metalMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, // 금속의 기본 색상 (은색, 철색 등) metalness: 1, roughness: 0.2,});유리: metalness: 0, roughness: 0, opacity: 0.1 ..
-
Three.js 설치(번들러 사용)3D/Three.js 2024. 8. 15. 09:11
Three.js 설치(번들러 사용) three.js 보일러플레이트를 사용하여 three.js를 설치한다.아래 링크 보일러플레이트는 webpack 번들러를 사용했다.https://github.com/aakatev/three-js-webpack GitHub - aakatev/three-js-webpack: Boilerplate for Three JS projectBoilerplate for Three JS project. Contribute to aakatev/three-js-webpack development by creating an account on GitHub.github.comgit clone https://github.com/aakatev/three-js-webpack.git .npm inpm ..
-
Three.js 설치(번들러 없이)3D/Three.js 2024. 2. 12. 19:33
Three.js 설치(번들러 없이)Three.js 는 모듈 방식으로 개발하는 것을 권장한다.three.js에서 공식적으로 webpack이나 vite같은 번들러의 이용을 권장하고 있고, 공식 문서도 번들러의 사용을 전제로 작성되어 있다. 아래의 설치 방법은 번들러를 사용하지 않은 방법이다.번들러를 사용하지 않기 때문에 폴더의 경로를 직접 지정해줘야 하는 번거로움이 있다.importmap을 사용하여 그 번거로움을 해결한다.1. npm 명령어 이용하여 설치1.1 node_moduls/three/build 폴더에서 three.module.js 가져오기npm install threeThree.js를 불러오기 위해서는 폴더의 경로를 지정해 주어야 한다. 하지만 Three.js의 다양한 모듈(controls, lo..
-
평면도를 3D로 만드는 방법3D/Three.js 2023. 11. 6. 11:53
평면도를 3D로 만드는 방법 1. 2D 이미지를 svg파일로 추출한다. 나는 벡터 드로잉 프로그램 중에 내게 제일 익숙한 Figma 를 사용하여 2D 이미지를 불러와 벽을 따라 path를 따서 svg로 export 했다. 2. 블렌더에서 svg 파일을 import 한다. 2.1. blender 3.6 기준, Edit>Preferences > Add-ons 에서 Import-Export:Scalable Vecor Graphics(SVG) 1.1 format 선택 2.2. File > Import > Scalable Vector Graphics(.svg) 3. 불러들인 svg의 사이즈를 실제 도면과 맞춘다. Scene-Unit의 설정을 Meter로 설정 4. vector 드로잉을 mesh로 바꾼다. 불러들인..
-
UPBGE로 navigation mesh 만들기3D/Three.js 2023. 10. 20. 20:51
UPBGE로 navigation mesh 만들기 UPBGE 란? UPBGE is an open-source, 3D game engine forked from the old Blender Game Engine and deployed with Blender itself. UPBGE는 기존 Blender 게임 엔진에서 파생되어 Blender 자체와 함께 배포되는 오픈 소스 3D 게임 엔진이다. UPBGE 설치 방법 1. UPBGE 다운로드 https://upbge.org/#/download UPBGE A game-engine fully integrated in Blender upbge.org 아래 내용과 같이 블렌더 버전에 따라 설치할 UPBGE 버전도 다르다. UPBGE 0.36.1 is based on B..
-
Three.js 공부 참고용 포스트3D/Three.js 2023. 6. 3. 08:50
https://velog.io/@9rganizedchaos/series/Three.js-journey-%EA%B0%95%EC%9D%98%EB%85%B8%ED%8A%B8 시리즈 | Three.js journey 강의노트 - 9rganizedchaos.log 🙌🏻 해당 글은 Three.js Journey의 강의 노트입니다.Raycaster와 같은 몇 가지 수식과 솔루션을 사용해 자신만의 Physics를 구현할 수도 있지만, 장력, 마찰, 바운싱, 제약 조건, 피벗 등의 사실적인 Physi velog.io