3D
-
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 ..
-
3D를 위한 삼각함수 기초3D 2024. 2. 17. 17:34
3D를 위한 삼각함수 기초 sinθ = θ에서 직각까지 빙돌아서 tanθ = θ에서 직각까지 바로 간 다음에 뚫린 길로 cosθ = 빗변에서 시작해서 θ를 사이에 두고 tanθ = sinθ / cosθ 특수각의 삼각비 30도 45도 60도 sin $$ \frac{ 1 }{2} $$ $$ \frac{ \sqrt{2} }{2} $$ $$ \frac{ \sqrt{3} }{2} $$ cos $$ \frac{ \sqrt{3} }{2} $$ $$ \frac{ \sqrt{2} }{2} $$ $$ \frac{ 1 }{2} $$ tan $$ \frac{1} { \sqrt{3} } $$ $$ { 1 } $$ $$ { \sqrt{3} } $$ 라디안 라디안은 호의 길이로 각도를 나타내는 방법이다. 각도를 실수로 표현하기 위..
-
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
-
유니티 마우스 클릭 지점, 라인렌더러3D/Unity 2022. 10. 24. 11:01
유니티 마우스 클릭 지점, 라인렌더러 마우스 클릭 지점 using System.Collections; using System.Collections.Generic; using UnityEngine; public class ChangeCursor : MonoBehaviour { void Start() { } void Update() { if(Input.GetMouseButtonDown(0)) { // 스크린의 마우스 위치로부터 Ray 생성 Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition); // 월드에서 레이캐스팅 히트가 발생한 위치, Ray가 충돌한 물체, Ray의 원점에서 얼마나 떨어져있는지 정보 저장 // hit 대상은 collider 속성이 있..