전체 글

Raycaster, 특정 방향의 광선(Ray)에 맞은 Mesh 판별하기

(준비) Line으로 선 만들고 메쉬 배치하기 Geometry를 이용해 광선을 시각적으로 보기레이캐스터에서 쏘는 광선은 눈에 보이지 않기 때문에 시각적으로 보이도록 광선과 동일한 위치에 geometry를 이용해 광선 그리면 된다.   /* Mesh 만들기 : Geometry를 이용해 광선을 시각적으로 보기 */ // 선의 시작점과 끝점을 정의 const lineMaterial = new THREE.LineBasicMaterial({ color: "yellow" }); const points = []; points.push(new THREE.Vector3(0, 0, 100)); // 모니터 바깥 방향 (화면에서 앞쪽) points.push(new THREE.Vector3(0, 0, -100));..

Raycaster, 동작 원리

Raycaster의 동작 원리 주로 3D 그래픽이나 게임 개발에서 특정 방향으로 가상의 광선을 쏘아 물체와의 충돌 여부를 계산하는 방식으로 사용된다.  Ray(광선)는 x-ray 할 때 그 ray이다.광선은 Mesh를 관통한다.이러한 특징을 이용해 광선을 이용해 클릭된 Mesh를 감지할 수 있다.Ray를 Casting 한다 해서 Raycaster라고 부른다.  광선 생성특정 위치(일반적으로 카메라의 위치)에서 특정 방향으로 가상의 광선을 쏜다.이 광선은 직선 경로로 설정된다.교차 검사광선이 가는 경로 상에 있는 3D 객체들과 교차하는지를 확인한다.여기서 교차 여부를 계산하기 위해 수학적인 교차 알고리즘이 사용된다.충돌 객체 찾기광선이 여러 개의 객체와 충돌하는 경우 가장 가까운 객체를 찾거나, 특정 조건..

조명, RectAreaLight_직사각형 모양으로 균일한 빛을 방사하는 조명 효과

RectAreaLight직사각형 모양으로 균일한 빛을 방사하는 조명이다.광원에서 직접적인 조명을 받는 물체 표면에 부드럽고 넓은 조명을 적용할 때 유용하다.주로 실내 장면이나 부드러운 조명 효과가 필요한 곳에 많이 사용한다width와 height를 통해 직사각형의 크기를 조절할 수 있다.직사각형의 평면에 따라 빛이 방사되기 때문에, 위치와 회전이 매우 중요하며, 정확히 원하는 방향으로 조명해야 한다.  RectAreaLight( color : Integer, intensity : Float, width : Float, height : Float ) 다음과 같은 주요 속성을 가진다color빛의 색상을 설정하는 속성이다.intensity빛의 밝기를 조절하는 속성이다.값이 클수록 빛이 더 강해진다.width와..

조명, HemisphereLight_하늘과 땅을 기반으로 빛을 조절하는 조명 효과

HemisphereLight 하늘과 땅을 기반으로 빛을 조절하는 조명이다.AmbientLight와 같이 전체적으로 은은하게 깔아주는 조명이며 그림자가 없는 것이 특징이다.위쪽 색상과 아래쪽 색상을 지정해 주면, 이 빛은 장면의 모든 객체에 고르게 빛을 투사하며, 이 빛의 방향은 특정하지 않고 주위 조명을 제공하는 역할을 한다.예를 들어 하늘은 하늘색, 땅은 흰색이나 약간의 회색을 주면 자연스러운 빛 효과를 얻을 수 있다.   HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float ) 주요 매개변수는 다음과 같다skyColor하늘 쪽에서 오는 빛의 색상이다.일반적으로 하늘색, 파란색 등으로 설정한다.groundColor땅 ..