threejs6 [ Three.js ] deltaTime과 currentTime - time 을 사용하는 이유 Three.js에서 애니메이션을 구현하다 보면 아래와 같은 코드를 자주 볼 수 있습니다.const currentTime = Date.now()const deltaTime = currentTime - timetime = currentTimemesh.rotation.y += 0.001 * deltaTime처음 보면 이런 생각이 들 수 있습니다.currentTime도 현재 시간인데, time도 시간 아닌가?왜 currentTime - time 을 하는 걸까?이번 글에서는 Three.js에서 일정한 애니메이션 속도를 유지하기 위해 deltaTime을 사용하는 이유를 알아보겠습니다. Date.now()는 현재 시간을 반환한다Date.now()는 현재 시간을 밀리초(ms) 단위로 반환합니다.예를 들어:console.. 2026. 5. 18. [ Three.js ] React Three Fiber vs Three.js, 어떤 걸 배워야 할까요? 오늘은 3D 웹 개발에 관심 있는 개발자라면 한 번쯤 고민하게 되는 주제, 바로 React Three Fiber와 Three.js의 차이에 대해 이야기해보려고 합니다!최근에는 단순한 웹사이트를 넘어, 3D 인터랙션과 몰입감 있는 UI를 제공하는 사이트들이 점점 많아지고 있습니다. 특히 포트폴리오, 브랜드 사이트, 3D 쇼핑몰, 게임형 웹사이트 등에서 3D 기술의 활용도가 크게 증가하고 있죠.그렇다면 많은 사람들이 말하는 Three.js와 React Three Fiber는 어떤 차이가 있을까요?그리고 어떤 걸 먼저 배우는 게 좋을까요?이번 글에서는 두 기술의 특징, 장단점, 그리고 어떤 상황에서 사용하면 좋은지 쉽게 정리해 보겠습니다. Three.js란?Three.js 는 웹 브라우저에서 3D 그래픽을 구.. 2026. 5. 15. [ Three.js ] Three.js의 미래는 밝을까? 웹 3D 시대에서 살아남을 기술인 이유웹사이트를 보다 보면 점점 “평범한 화면”보다 인터랙션이 강한 페이지들이 많아지고 있습니다.마우스를 움직이면 배경이 반응하고, 제품이 360도로 회전하고, 스크롤만 내려도 영화 같은 연출이 이어지는 사이트들 말이죠.이런 경험의 중심에는 자주 등장하는 기술이 있습니다. 바로 Three.js 공식 사이트 입니다.그렇다면 지금 시점에서 Three.js를 공부하는 건 괜찮은 선택일까요?그리고 앞으로도 살아남을 기술일까요?이번 글에서는 Three.js의 현재와 미래, 그리고 실제 실무 관점에서의 가능성을 이야기해 보겠습니다. Three.js란 무엇인가?Three.js 공식 사이트 는 웹 브라우저에서 3D 그래픽을 쉽게 만들 수 있게 도와주는 JavaScript 라이브러리입니다.. 2026. 5. 7. [ Three.js ] MeshLambertMaterial의 특징 MeshLambertMaterial은 Three.js에서 사용되는 재질(Material) 중 하나로, 빛을 반사하는 표면을 표현하는 데 사용됩니다. 이 재질은 램버트 반사(Lambertian reflection) 모델을 기반으로 하며, 빛이 물체 표면에 부드럽게 퍼지는 효과를 만듭니다. 주로 빛의 영향을 받는 매트한 표면(예: 종이, 플라스틱, 벽 등)을 표현할 때 사용됩니다. MeshLambertMaterial의 특징램버트 반사 모델:빛이 물체 표면에 부드럽게 퍼지는 효과를 구현합니다.빛의 방향과 표면의 각도에 따라 밝기가 달라집니다.빛의 영향을 받음:MeshLambertMaterial은 조명(directionalLight, ambientLight 등)의 영향을 받습니다.조명이 없으면 물체가 완전히 .. 2025. 2. 2. Three.js로 간단한 3D 장면 만들기 이번 글에서는 Three.js를 사용해 간단한 3D 장면(Scene)을 만들어보겠습니다. 코드와 함께 주요 개념들을 정리해보았습니다.Three.js 프로젝트 기본 설정Three.js는 웹에서 3D 그래픽을 렌더링 할 수 있도록 도와주는 라이브러리입니다. 먼저 Three.js를 설치하거나 CDN으로 로드한 후 사용합니다. 최종 결과물 코드 설명1. 씬(Scene) 생성const scene = new THREE.Scene();scene.background = new THREE.Color('F0F0F0'); // 장면의 배경색 설정 Scene은 3D 객체를 추가하는 컨테이너 역할을 합니다. 여기에서는 배경색을 #F0F0F0으로 설정했습니다.2. 카메라(Camera) 추가const camera = new T.. 2025. 1. 28. Three.js란 무엇인가? Three.js는 WebGL(Web Graphics Library)을 쉽게 사용할 수 있도록 만들어진 JavaScript 3D 라이브러리입니다. 웹 브라우저에서 복잡한 3D 그래픽과 애니메이션을 구현할 수 있도록 돕습니다. 사용자는 플러그인 없이 웹 브라우저에서 바로 인터랙티브한 3D 콘텐츠를 즐길 수 있습니다. Three.js의 예제https://next.junni.co.jp/ Junni is...アイデアとテクノロジーで、世界をもっとハッピーでワクワクしたものに。ジュニのものづくりの理想を少し、覗いてみませんか？next.junni.co.jp https://coastalworld.com/ Coastal World - Digital Banking 3D Game and MarketplacePlay Coastal Wo.. 2025. 1. 27. 이전 1 다음 728x90