controls

우리는 계속 카메라 좌표를 고정시켜놨다.
(물론 GUI를 통해 후시적으로 조종할 수 있지만...)

하지만 좀 더 직관적으로 마우스로 회전,확대를 할 수는 없을까?

물론 있다! 물론 외부 모듈을 사용해야한다.
해당 예제에서는 OrbitControls를 이용하여 이 기능을 구현한다.

import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

const controls = new OrbitControls(camera,renderer.domElement);

양면 다 메쉬 만들기

이렇게 OrbitControl을 이용해 메쉬의 내부까지 확대를 하게되면, 텅텅 비어있다.
이는 한 면을 구현할 때, 앞면만 칠해져있기 때문이다.
(단면 색종이, 양면 색종이를 생각해보면 된다.)

그러면 양면 색종이를 만드는 방법은 material를 생성할 때 side 속성을 조정해면 된다.

const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshStandardMaterial({
	color :'hotpink',
  	side : THREE.DoubleSide
});
const Mesh = new THREE.Mesh(geometry,material);

와이어 프레임

와이어프레임은 마찬가지로 material 속성에서 wireframe 속성의 값을 바꾸면 된다.

const material = new THREE.MeshStandardMaterial({
	color :'hotpink',
  	side : THREE.DoubleSide,
  	wireframe: true // 이 부분을 수정한다.
});
const mesh = new THREE.Mesh(geometry, material)

짜잔!

• 우리는 앞서 박스 메쉬를 만들 때 BoxGeometry에 대한 인자를 (1,1,1)로 설정했다.
  하지만 네 번째 인수가 생략되었는데, '한 면을 구성하는 직사각형의 개수'를 의미한다.

const geometry = new THREE.BoxGeometry(1,1,1,2);
const material = new THREE.MeshStandardMaterial({
	color:'hotpink',
  	side: THREE.DoubleSide,
  	wireframe:true
});

(1,1,1,2)처럼 이런 식으로 네번째 인자의 조정을 통해 wireframe의 모습을 변형시킬 수 있다.

원 모형

앞서 우리는 geometry를 계속 BoxGeometry를 이용하여 만들었다.
하지만 box모양 뿐만이 아닌, 다양한 geometry를 THREE.js 내부에서 이용할 수 있는데, 그 중 하나는 CircleGeometryd이다.

const geometry = new THREE.CircleGeometry(radius,segments,thetaStart,thetaLength);

원통 모형

const geometry = new THREE.ConeGeometry(radius,height,radialSegments,heightSegments,openEnded,thetaStart,thetaLength);

콘 모형

const geometry = new THREE.CylinderGeometry(radiusTop,radiusBottom,height,radialSegments,heightSegments,openEnded,thetaStart,thetaLength);

이 외에도 plane, shape(베지어 커브), sphere,tube 등등..다양한 geometry가 존재하니, 공식 문서를 참고해보자.

https://threejs.org/docs/#api/en/geometries/SphereGeometry

해당 공식 문서에서 함수에 필요한 인자들을 조절해보며 어떤 모습으로 변화하는지 실시간으로 확인할 수 있다.