threejs의 최적화를 하려면 어떻게 해야할까요?

각 지오메트리가 따로 움직이는게 아니라면, 여러개의 지오메트리를 하나의 지오메트리로 병합(merge)해서 사용하면 성능을 극적으로 끌어올릴 수 있답니다. 예전 버전의 three.js에서는 BufferGeometry를 사용했었는데요, 최신 버전에서는 따로 BufferGeometryUtils라는 것을 사용해서 처리합니다. 아마 예전 버전에 해당하는 코드를 검색하신 것 같습니다.
간단하게 BoxGeometry와 SphereGeometry를 병합해서 사용하는 예제를 만들어 보았습니다. 우리 강의에서 다른 예제 실행하듯이 ex01.js 이런 식으로 저장해서, 똑같이 실행해주시면 됩니다.

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

// ----- 주제: 지오메트리 합치기(merge)

export default function example() {
	// Renderer
	const canvas = document.querySelector('#three-canvas');
	const renderer = new THREE.WebGLRenderer({
		canvas,
		antialias: true
	});
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

	// Scene
	const scene = new THREE.Scene();

	// Camera
	const camera = new THREE.PerspectiveCamera(
		75,
		window.innerWidth / window.innerHeight,
		0.1,
		1000
	);
	camera.position.z = 10;
	scene.add(camera);

	// Light
	const ambientLight = new THREE.AmbientLight('white', 0.5);
	scene.add(ambientLight);

	const directionalLight = new THREE.DirectionalLight('white', 1);
	directionalLight.position.x = 1;
	directionalLight.position.z = 2;
	scene.add(directionalLight);

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

	const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
	const sphereGeometry = new THREE.SphereGeometry(1.3, 32, 32);
	const material = new THREE.MeshNormalMaterial();

	// 지오메트리 합치기
	const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries([boxGeometry, sphereGeometry]);
	// 메쉬 생성
	const mesh = new THREE.Mesh(mergedGeometry, material);
	scene.add(mesh);

	// 그리기
	const clock = new THREE.Clock();

	function draw() {
		renderer.render(scene, camera);
		renderer.setAnimationLoop(draw);
	}

	function setSize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(window.innerWidth, window.innerHeight);
		renderer.render(scene, camera);
	}

	// 이벤트
	window.addEventListener('resize', setSize);

	draw();
}