three.js_geometry(10)

OrbitControls 셋팅

일단 작업 시작 전에 간단하게 편리한 기능을 셋팅해두려고 한다.
three.js답게 드래그할 때 움직이거나 휠을 돌렸을 때 줌, 아웃이 되도록 하는 기능인데

<script>
	import * as THREE from 'three';
 ⭐️ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; 
 
 	// Controls
 ✅ const controls = new OrbitControls(camera, renderer.domElement);

</script>

해당과 같이 npm이나 webpack을 사용할 때는 import로 ⭐️ 부분을 추가해 넣어주면 된다.

아니라면 html에서 스크립트 파일을 넣어주면 됨!

그 후에는 controls 상수를 선언해주고 기존과는 다르게 now THREE가 아니라
new OrbitControls를 사용해준다. (여기서 orbit의 뜻은 궤도라는 뜻!)

npm이나 webpack을 사용하는것이 아니라면 now THREE.OrbitControls로 해주어야 한다!

OrbitControls의 인자로는 camera와 renderer.domElement를 넣어주면 되는데 여기서 renderer.domElement는 canvas 태그를 뜻하는것!

이제 결과물을 확인하면 마우스로 움직이고 줌,아웃이 되는 mesh를 확인 할 수 있을 것이다!

---

material의 추가 속성

<script>
	const material = new THREE.MeshStandardMaterial({
		color: 'hotpink',
		wireframe:true, ⭐️
	});
</script>

wireframe

wireframe 속성을 true 설정 해주면 mesh의 면이 wireframe으로 노출이 된다.

DoubleSide

<script>
	const material = new THREE.MeshStandardMaterial({
		color: 'hotpink',
		// wireframe:true, 
		side: THREE.DoubleSide ⭐️
	});
</script>

side라는 속성에 THREE.DoubleSide라는 속성은
mesh를 마우스 휠로 줌을 계속 하다보면 카메라가 mesh, 즉 박스안으로 위치하게 되는데
박스의 안은 카메라가 확인하지 못하는 영역이라 박스가 갑자기 사라지고 아무것도 노출되지 않게된다.

이때! side : THREE.DoubleSide 속성을 적용해주면 박스의 내부까지도 확인을 할 수 가 있다.
아래의 사진처럼 줌을 하면 박스의 내부도 확인할 수 있게 변경이 된걸 확인할 수 있다!

wireframe이 true일 때는 면이 없기 때문에 확인할 수가 없다!

three.js에서 주로 사용하는 geometry도 종류가 다양한대
따로 내가 설명을 해주는건 의미가 없고 Thrss.js 공식 사이트에서 눈으로 직접 보면서 확인하는 것이 더 좋기 때문에 여기까지로 설명 마무리!

---

geometry의 종류

three.js에서 주로 사용하는 geometry도 종류가 다양한대
따로 내가 설명을 해주는건 의미가 없고 📎 Thrss.js 공식 사이트에서 예제들을
눈으로 직접 보면서 확인하는 것이 더 좋기 때문에 여기까지로 설명 마무리!

geometry의 segments

segments란 대략 '부분' 이라는 뜻을 가진 단어로, 얼마나 이 사이드를 나눌지를 나타내는건데
위에서 설명한 wireframe이 true로 설정하게 되면

위츼 이미지처럼 mesh의 면적이 몇개로 사이드로 나뉘어져 있는가를 뜻한다.

const geometry = new THREE.BoxGeometry(1, 1, 1, ⭐️, ⭐️, ⭐️);
gemetry 셋팅에서 x, y, z 크기 셋팅 다음에 값을 셋팅해주면 된다.

여기서 표시한 widthSegments, heightSegments, depthSegments는 각각 x,y,z 축으로 몇개씩 사이드를 넣을건지 셋팅하는 것이고 기본적으로는 1,1,1이 셋팅되어 있다.

만약에 이 값들을 크게 올려준다면 어떻게 보일까?

<script>
	const geometry = new THREE.BoxGeometry(1, 1, 1, 12, 12, 12);
</script>

각각 Segments의 값들을 12로 셋팅하면 아래의 이미지와 같이 나타난다.

wireframe으로만 해서 이렇게 의도해서 셋팅해도 꽤 멋스러운 효과를 낼 수도 있을 것 같다!
이렇게 Segments를 나누는 이유는 나중에 뒤에서 더 설명토록 하겠다!