threejs(4)

OrbitControls

• 카메라가 대상 주위를 선회할 수 있음
• 마우스로 카메라를 돌리면서 대상 여기저기 살필 수 있음, 확대 축소도 가능

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
new OrbitControls(camera, renderer.domElement);

// Mesh
const geometry = new THREE.BoxGeometry(1, 1, 1, 16, 16, 16);
const material = new THREE.MeshStandardMaterial({
  color: 'hotpink',
  side: THREE.DoubleSide, // 물체 안에서도 카메라로 찍을 수 있음
  wireframe: true, // frame 만 보이게 할건지
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Geometry 살펴보기

• BoxGeometry
• 공식 문서의 각 Geometry 별 설명 페이지에 가보면 예시 화면에Controller 가 부착되어있어 이것저것 조절하면서 확인해볼 수 있다.

질감이 움직이는 구 만들기

SphereGeometry(radius, widthSegments, HeightSegments)

• 구 형태

• Segments는 점의 개수

• 

• 예시

// 반지름 5, 각 높이/넓이 Segments 는 64개씩 설정
const geometry = new THREE.SphereGeometry(5, 64, 64);
// 색상 설정
const material = new THREE.MeshStandardMaterial({ color: 'orangered', side: THREE.DoubleSide, flatShading: true });
const mesh = new THREE.Mesh(geometry, material);

// 각 점들의 위치 
const positionArray = geometry.attributes.position.array;
// 점들이 움직일 랜덤한 위치를 미리 생성해둠
const randomArray = [];
for (const key in positionArray) {
  // @ts-expect-error
  positionArray[key] += (Math.random() - 0.5) * 0.2; // -0.5~+0.5 더해줌
  randomArray[key] = (Math.random() - 0.5) * 0.2;
}

scene.add(mesh);

// 그리기
const clock = new THREE.Clock();
function draw(): void {
  // 점점 증가하는 시간 값 이용
  const elapsedTime = clock.getElapsedTime() * 3;
  for (const key in positionArray) {
    // sin 값을 이용한다. (1 ~ -1 까지의 값이 리턴됨)
    // 정해둔 randomArray 값을 더해주지 않으면 그냥 일정하게 커졌다 작아졌다만 하게됨
    // @ts-expect-error
    positionArray[key] += Math.sin(elapsedTime + randomArray[key] * 100) * 0.002;
  }
  // 이 값을 true 로 바꿔줘야 점의 위치가 변경되는 게 보임
  geometry.attributes.position.needsUpdate = true;
  renderer.render(scene, camera);
  renderer.setAnimationLoop(draw);
}

draw();

• SphereGeometry 대신 PlainGeometry 적용했을 때
  • 호오 뭔가 불타는 땅같음 던전 바닥 느낌~!