Code Less, Create More!

Simple but useful code snippets for 3D Graphic Developers

반응형

Three.js 3

하나의 HTML 파일에 3D 컨텐츠를 iframe으로 포함하는 방법

웹에서 동작하는 3D 엔진들 (예: three.js 또는 babylon.js)로 제작된 3D 콘텐츠는 일반적으로 캔버스를 사용하여 GPU 제어와 그래픽 컨텍스트의 반복 렌더링을 처리합니다. 이 때문에 HTML 페이지의 전체 클라이언트 영역을 사용하는 경우가 많고 따라서 웹 브라우저에서 별도의 단위로 처리되어야 합니다. iframe은 웹 브라우저에서 별도의 컨텍스트 관리를 제공하기 때문에 이 용도에 맞는 적합한 tag입니다. 한편 iframe 요소의 "src" 속성은 iframe 내부에 표시될 콘텐츠의 URL을 지정하는 데 사용되는 데, 이를 위해 별도의 HTML 파일이 필요하기 때문에 "src" URL이 없이는 iframe 콘텐츠를 사용하는 것이 쉽지 않습니다. 그러나 웹에서 하나의 기사 또는 블로그 포..

Three.js 2023.04.11

Three.js를 하나의 HTML 파일로 실행하는 간단한 Boilerplate 예제

보일러플레이트 코드는 신규 또는 실험적인 프로젝트를 빠르게 시작하기에 좋은 방법입니다. 간단한 보일러플레이트 코드를 사용하면 기본 설정 코드를 처음부터 작성하지 않아도 되므로 시간이 절약되고 오류가 줄어듭니다. 보일러플레이트 코드를 시작점으로 사용해서 이를 기반으로 프로젝트를 구축할 수 있습니다. Three.js의 보일러플레이트 코드는 일반적으로 렌더러, 카메라 및 장면과 같은 Three.js 장면을 만드는 데 필요한 기본 구성 요소를 포함합니다. 또한 Cube 또는 Sphere와 같은 기본적인 객체를 포함할 수 있으며, 이를 수정하거나 커스텀 3D 모델로 교체할 수 있습니다. HTML과 Javascript를 사용하는 보일러플레이트 코드는 하나의 단일 HTML 파일로 시작할 수 있어서 편리합니다. 이를 ..

Three.js 2023.04.08

구의 표면에 점들을 균등하게 분포시키는 방법 (Three.js)

구면 상에 점들을 고르게 분포시키는 문제는 기하학에서 고전적인 문제 중 하나이며, 컴퓨터 그래픽, 분자 모델링, 물리학 등 다양한 분야에서 활용됩니다. 실용적으로 가장 적절한 방법 중 하나는 "Fibonacci Sphere"를 사용하는 것입니다. 이 방법은 피보나치 나선형 구를 기반으로 하여 구의 표면에 점들을 나선형 패턴으로 배치합니다. 각 나선층마다 포인트 수가 피보나치 수열에 따라 증가하여, 결과적으로 점들이 대략 고르게 분포하게 됩니다. 다른 방법으로 "Geodesic Sphere (측지식 구)"를 사용할 수 있는 데, 측지선의 개념에 기반하여 점들을 구에 분배합니다. 측지식 구는 일정한 점의 수를 제어할 수 있지만, 분포가 고르지 않을 수 있으며, 피보나치 구처럼 조절성이 좋지 않습니다. 또 다..

Three.js 2023.04.05
반응형