[Three.JS]코드 분석하기

3D 디자이너에서 직무를 바꾼거라..어느정도 이해는 잘 하겠지 싶었는데 이게왠걸



코드를 보자마자  멘붕이 왔다.

이럴땐 코드분석으로..이해를 먼저 하자

 

코드가 정말 기니까 그중에서도 Three.js의 내장 객체와 함수 알아두기!!

 

---

	let modelRotation = new THREE.Euler(0, 0, 0);

모델의 회전을 나타내는 Euler객체.

 

일반적으로 오일러 각 (euler angles)이라고도 불리며, 3D공간에서 객체의 회전을 표현하는데 사용됨.

 

Euler 객체는 THREE.Euler로부터 생성됨

 

각도 값은 라디안 단위로 표현되며, 세 개의 각도 값으로 x, y, z 축의 회전을 나타냄.

예를 들어, new THREE.Euler(0, 0, 0)는 x, y, z 축 모두에 대한 회전이 없음을 나타냄.

 

---

	const position = new THREE.Vector3();

Three.js의 내장 객체인 Vector3를 사용하여 새로운 3차원 벡터를 생성하는 코드

 Vector3는 Three.js에서 3D 공간에서의 위치, 이동 벡터 등을 표현하기 위해 사용되는 클래스다.

 

 또한, position.add(anotherVector)와 같은 메서드를 사용하여 벡터끼리의 덧셈 연산을 수행할 수도 있다.

---

		scene = new THREE.Scene();

THREE.Scene 객체를 생성하여 scene 변수에 할당합니다. 이 객체는 Three.js의 3D 장면을 나타냄.

 모든 3D 객체, 조명, 카메라 등은 이 장면에 추가되어 렌더링된다.

---

const dirLight1 = new THREE.DirectionalLight( 0xffddcc, 1 )

THREE.DirectionalLight 객체를 생성하여 dirLight1 변수에 할당.

 

방향성 조명은 특정 방향에서 나오는 조명으로, 조명의 위치를 지정하는 position 속성이 필요.

 

생성자에는 조명의 색상을 나타내는 16진수 값(0xffddcc)과 조명의 강도(1)를 전달.

---

scene.add( dirLight1 );

방향성 조명 객체(dirLight1)를 장면에 추가.

 

이렇게 하면 장면에 방향성 조명이 적용되고, 조명의 위치와 방향에 따라 장면이 조명에 의해 비추어짐.

---

pmremGenerator = new THREE.PMREMGenerator(renderer);

메타 레이즈 파생(PMREM) 생성기를 생성하고 셰이더를 컴파일.

 

PMREM 생성기란 ? 실시간 렌더링에서 주변 조명과 반사를 모사하기 위해 사용되는 기술.

---

		pmremGenerator.compileEquirectangularShader();

이퀴렉탄귤러(Equirectangular) 텍스처를 사용하여 레이즈 맵을 생성.

이퀴렉탄큘러 텍스쳐란 ? 구 형태로 전개된 360도의 파노라마 이미지를 직사각형 형태로 표현한 텍스쳐.

 

주로 주변 조명 정보를 담고 있으며, 주변 환경의 반사 및 조명을 재현하는데 사용됨.

---

		const geometry = new THREE.BufferGeometry();
		geometry.setFromPoints( [ new THREE.Vector3(), new THREE.Vector3() ] );

버퍼 기하학(Buffer Geometry) 객체를 생성하고 두 개의 점으로 초기화

---

		line = new THREE.Line( geometry, new THREE.LineBasicMaterial() );
		scene.add( line );

선(Line) 객체를 생성하고 장면에 추가

---

		const loader = new GLTFLoader();

 GLTFLoader 객체를 생성

---

		raycaster = new THREE.Raycaster();

광선 검출을 위한 Raycaster 객체를 생성

---

		mouseHelper = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 11 ), new THREE.MeshNormalMaterial() );
		mouseHelper.visible = false;
		scene.add( mouseHelper );

마우스 위치를 시각화하기 위한 박스 메시(Box Mesh) 객체를 생성하고 장면에 추가

---

 업데이트 투비컨티뉴..

---

참고하면 좋은 코드!

https://github.com/spite/THREE.DecalGeometry

GitHub - spite/THREE.DecalGeometry: Decals for three.js

 

decal texture three.js

이렇게 구글에 쳐봐도 많이 나온다.