카메라

플레이어의 카메라를 제어하는 방법을 알아보세요

크리에이터로서 플레이어의 카메라를 완전히 제어할 수 있습니다. 기본적으로 플레이어는 씬을 탐색하는 동안 1인칭 또는 3인칭 카메라 모드 중에서 자유롭게 선택할 수 있지만, 다른 카메라 모드를 강제할 수도 있습니다.

가상 카메라는 고정될 수 있고, 플레이어나 다른 엔티티를 항상 바라보도록 회전할 수도 있으며, 플레이어나 다른 엔티티에 부착되어 항상 함께 이동하도록 만들 수도 있습니다.

📔 참고: 기본 1인칭 및 3인칭 카메라를 전환하려면 다음을 참조하세요. 카메라 수정 영역.

1인칭 및 3인칭 카메라 모드

플레이어는 일반적으로 키보드의 V를 눌러 1인칭과 3인칭 카메라를 전환할 수 있습니다. 다음을 사용하세요. CameraModeArea 씬의 특정 영역 안에 있는 모든 플레이어에게 카메라 모드를 1인칭 또는 3인칭으로 강제합니다.

const entity = engine.addEntity()

CameraModeArea.create(entity, {
	area: Vector3.create(4, 3, 4),
	mode: CameraType.CT_FIRST_PERSON,
})

플레이어의 현재 카메라 모드가 다음과 일치하지 않으면 CameraModeArea에 해당하는 카메라 모드로 전환됩니다. 이 변경이 씬 때문임을 알리기 위해 화면에 토스트가 표시됩니다. 영역 안에 있는 동안 플레이어는 카메라 모드를 변경할 수 없습니다. 플레이어가 CameraModeArea를 벗어나면, 카메라 모드는 들어오기 전 상태로 복원됩니다.

다음을 사용하세요. CameraModeArea 플레이어가 특정 카메라 모드를 사용했을 때 훨씬 더 좋은 경험을 하게 되는 구역에서 사용하세요. 예를 들어, 플레이어가 작은 오브젝트를 클릭해야 한다면 1인칭이 적합하고, 씬이 머리 위에 붙여 놓은 어떤 엔티티를 플레이어가 알아차려야 한다면 3인칭이 유용할 수 있습니다. 플레이어가 카메라 모드를 전환하는 방법을 안다고 가정하지 마세요. 처음 온 플레이어 중에는 그런 옵션이 있는지 모르거나, 전환 키를 기억하지 못할 수도 있습니다.

📔 참고카메라 수정 영역은 Transform 구성 요소의 위치 와 회전 의 영향을 받지만, 스케일.

📔 참고의 영향은 받지 않습니다. 여러 카메라 수정 영역이 겹친다면, 씬 코드로 마지막에 인스턴스화된 것이 다른 것보다 우선합니다.

다음과 같은 CameraModeArea 구성 요소를 생성할 때는 다음을 제공해야 합니다.

• 영역: 수정 영역의 크기

• 모드: 이 영역에서 강제할 카메라 모드. 다음의 CameraType enum에서 선택합니다.

지원되는 카메라 모드는 다음과 같습니다.

• CameraType.CT_FIRST_PERSON

• CameraType.CT_THIRD_PERSON

카메라 모드 조회

다음을 사용하여 플레이어의 카메라 모드를 조회할 수 있습니다. CameraMode 구성 요소를 engine.CameraEntity.

const cameraMode = CameraMode.get(engine.CameraEntity)
if (cameraMode.mode === CameraType.CT_FIRST_PERSON) {
	console.log('플레이어가 1인칭 카메라를 사용 중입니다')
} else {
	console.log('플레이어가 3인칭 카메라를 사용 중입니다')
}

다음을 사용하여 카메라 모드 변경을 구독할 수도 있습니다. onChange 함수를 CameraMode 구성 요소에서.

CameraMode.onChange(engine.CameraEntity, (cameraMode) => {
	if (!cameraMode) return
	console.log('플레이어의 카메라 모드가 다음으로 변경됨', cameraMode.mode)
})

가상 카메라 사용하기

씬에서 커스텀 카메라 동작을 사용하려면 두 가지가 필요합니다.

• 가상 카메라 만들기: 씬에 엔티티를 만들고 여기에 VirtualCamera.

• 를 할당하세요. 가상 카메라 연결하기: 다음의 MainCamera 구성 요소를 예약된 엔티티 engine.CameraEntity에 추가하고, VirtualCamera 구성 요소에서.

가 있는 엔티티에 대한 참조를 포함하세요. 그러면 카메라는 VirtualCamera 구성 요소가 있는 엔티티에 연결됩니다. 엔티티가 이동하거나 회전하면 카메라도 함께 이동합니다.

function main() {
	const myCustomCamera = engine.addEntity()
	Transform.create(myCustomCamera, {
		position: Vector3.create(1, 2, 1),
	})
	VirtualCamera.create(myCustomCamera, {})

	const mainCamera = MainCamera.createOrReplace(engine.CameraEntity, {
		virtualCameraEntity: myCustomCamera,
	})
}

이 예시에서 플레이어가 씬 경계 안에 있는 한 카메라는 씬 내의 고정된 위치에 항상 있게 됩니다. 플레이어가 씬 경계를 벗어나는 즉시 기본 카메라 동작으로 복원됩니다.

시야각

가상 카메라의 fov 속성을 설정하면 Explorer의 기본 시야각(FOV)을 덮어쓸 수 있습니다. 이 덮어쓰기는 이 가상 카메라가 활성화되어 있는 동안에만 적용됩니다. fov 를 생략하면 Explorer의 기본값(일반적으로 60도)이 사용됩니다.

const cinematicCamera = engine.addEntity()
Transform.create(cinematicCamera, {
	position: Vector3.create(8, 3, 2),
})
VirtualCamera.create(cinematicCamera, {
	fov: 45,
})

더 좁은 FOV(더 낮은 값)는 확대되어 보이며, 시네마틱 연출이나 조준에 유용합니다. 더 넓은 FOV(더 높은 값)는 장면을 더 많이 보여 주며, 파노라마 뷰에 유용합니다.

씬에는 원하는 만큼 VirtualCamera구성 요소가 있는 엔티티를 포함할 수 있으며, 플레이어가 이동하거나 특정 행동을 할 때 여러 가상 카메라 사이를 동적으로 전환할 수 있습니다. 어떤 시점에든 활성화될 수 있는 가상 카메라는 하나뿐이며, 이는 MainCamera 구성 요소에 의해 engine.CameraEntity.

기본 카메라 동작으로 되돌리려면 값을 undefined 로 설정하세요. MainCamera.virtualCameraEntity. 그러면 플레이어는 1인칭과 3인칭 카메라를 자유롭게 전환할 수 있습니다. 플레이어가 이 두 모드 중 하나만 사용하도록 하고 싶다면, 다음을 사용해 둘 중 하나를 강제할 수 있습니다. 카메라 수정 영역 두 모드 중 하나를 강제합니다.

📔 참고: 카메라 수정 영역은 활성화된 가상 카메라가 없을 때만 플레이어에게 영향을 줍니다. 씬이 현재 가상 카메라를 사용 중이고 플레이어가 카메라 수정 영역으로 들어가면 아무 일도 일어나지 않습니다.

3D 모델에 카메라 노드가 콘텐츠의 일부로 포함되어 있다면, SDK에서 이를 사용할 수 없습니다. 모든 카메라는 SDK를 사용해 엔티티로 만들어야 합니다.

function main() {
	// 커스텀 가상 카메라
	const myCustomCamera = engine.addEntity()
	Transform.create(myCustomCamera, {
		position: Vector3.create(1, 2, 1),
	})
	VirtualCamera.create(myCustomCamera, {})

	const mainCamera = MainCamera.createOrReplace(engine.CameraEntity, {
		virtualCameraEntity: myCustomCamera,
	})

	// 클릭 가능한 큐브
	const clickCube = engine.addEntity()
	Transform.create(clickCube, { position: Vector3.create(8, 0, 8) })
	MeshRenderer.setBox(clickCube)
	MeshCollider.setBox(clickCube)
	pointerEventsSystem.onPointerDown(
		{
			entity: clickCube,
			opts: { button: InputAction.IA_POINTER, hoverText: '카메라 재설정' },
		},
		() => {
			// 카메라를 기본 동작으로 재설정
			const mainCamera = MainCamera.getMutable(engine.CameraEntity)
			mainCamera.virtualCameraEntity = undefined
		}
	)
}

💡 팁: 카메라가 아바타에서 멀어졌을 때는 아바타의 움직임도 함께 고정하는 것이 좋은 경우가 많습니다. 그래야 플레이어가 장애물 쪽으로 무작정 이동하지 않습니다. 다음을 참조하세요. 입력 수정

플레이어가 마우스로 가상 카메라를 조작하도록 하려면, screenDelta 의 PrimaryPointerInfo 구성 요소 속성을 읽어 프레임마다 커서가 얼마나 움직였는지 확인한 다음, 그 움직임을 카메라의 회전에 적용하세요. 이 방법은 커서가 잠겨 있어도 작동합니다. 자세한 마우스 룩 예시는 다음을 참조하세요. 마우스 움직임 을 참조하세요.

조감도

가상 카메라를 사용하면 씬을 위에서 내려다보는 시점으로 볼 수 있습니다. 이는 아바타의 일반적인 시점을 재미있게 변형한 것이며, 다양한 게임 메커니즘을 가능하게 할 수 있습니다.

카메라가 완전히 수직 아래를 바라보게 배치하는 것은 피해야 합니다. 대신 항상 카메라를 약간 기울이세요. 1도만으로도 충분합니다. 플레이어 방향 제어가 아바타의 방향이 아니라 카메라의 시점을 기반으로 하기 때문입니다. 카메라가 완전한 조감도로 아래를 보고 있으면 어느 방향이 어느 쪽인지 분명하지 않습니다. 1도의 거의 느껴지지 않는 기울기만으로도 전방 방향을 확립하기에 충분합니다.

function main() {
	// 조감도 카메라
	const myCustomCamera = engine.addEntity()
	Transform.create(myCustomCamera, {
		position: Vector3.create(8, 5, 8),
		rotation: Quaternion.fromEulerDegrees(91, 0, 0),
		// 회전이 90º가 아니라 91º라는 점에 유의하세요
	})
	VirtualCamera.create(myCustomCamera, {})

	const mainCamera = MainCamera.createOrReplace(engine.CameraEntity, {
		virtualCameraEntity: myCustomCamera,
	})
}

시야각

다음을 사용해 가상 카메라에 사용자 정의 시야각(FOV)을 설정할 수 있습니다. fov 속성. 값은 도 단위입니다. 생략하면 기본값은 60입니다.

VirtualCamera.create(myCustomCamera, {
	fov: 90,
})

더 넓은 FOV(더 높은 값)는 장면을 한 번에 더 많이 보여 주고 속도감을 만들어 주므로 레이싱 게임에 유용할 수 있습니다. 더 좁은 FOV(더 낮은 값)는 확대되어 보이며 조준이나 시네마틱 샷에 유용합니다.

카메라 전환

씬이 가상 카메라 사이를 전환하거나 기본 카메라 동작과 가상 카메라 사이를 전환할 때마다 플레이어는 전환을 보게 됩니다. 가상 카메라의 위치, 회전 및 기타 모든 매개변수는 일정 시간 동안 부드럽게 변합니다.

가상 카메라의 전환 설정은 다음으로의 전환 방식을 결정합니다. 로 전환하는 방식은 씬의 다른 어떤 카메라에서든, 기본값을 포함하여 해당 카메라로 전환할 때 적용됩니다. 이는 다음으로의 전환에는 영향을 주지 않습니다. 에서 나오는 전환에는 영향을 주지 않습니다.

VirtualCamera.create(myCustomCamera1, {
	defaultTransition: { transitionMode: VirtualCamera.Transition.Time(6) },
})

💡 팁: 전환 없이 즉시 카메라로 전환하려면 전환 시간 또는 속도를 0으로 설정하세요.

사용 사례에 따라 지속 시간 대신 전환 속도를 설정하는 편이 더 나을 수 있습니다.

• 고정 시간: 전환 지속 시간을 설정하면, 카메라는 해당 시간 안에 경로를 완료하는 데 필요한 만큼의 속도로 이동합니다.

• 고정 속도: 전환 중 가상 카메라가 얼마나 빠르게 이동할지 설정하면, 지속 시간은 거리에 따라 달라집니다. 속도에 사용되는 값은 다음으로 해석됩니다. 초당 미터.

아래는 이 두 전환 모드의 예시입니다.

// 고정 지속 시간
VirtualCamera.create(myCustomCamera1, {
	defaultTransition: { transitionMode: VirtualCamera.Transition.Time(6) },
})

// 고정 속도
VirtualCamera.create(myCustomCamera1, {
	defaultTransition: { transitionMode: VirtualCamera.Transition.Speed(3) },
})

아래는 두 개의 가상 카메라와 그 사이의 전환을 포함한 전체 예시입니다.

function main() {
	// 커스텀 가상 카메라 1
	const myCustomCamera1 = engine.addEntity()
	Transform.create(myCustomCamera1, {
		position: Vector3.create(1, 2, 1),
	})
	VirtualCamera.create(myCustomCamera1, {
		defaultTransition: { transitionMode: VirtualCamera.Transition.Time(1) },
	})

	// 커스텀 가상 카메라 2
	const myCustomCamera2 = engine.addEntity()
	Transform.create(myCustomCamera2, {
		position: Vector3.create(1, 2, 1),
	})
	VirtualCamera.create(myCustomCamera2, {
		defaultTransition: { transitionMode: VirtualCamera.Transition.Time(3) },
	})

	const mainCamera = MainCamera.createOrReplace(engine.CameraEntity, {
		virtualCameraEntity: myCustomCamera1,
	})

	// 클릭 가능한 큐브
	const clickCube = engine.addEntity()
	Transform.create(clickCube, { position: Vector3.create(8, 0, 8) })
	MeshRenderer.setBox(clickCube)
	MeshCollider.setBox(clickCube)
	pointerEventsSystem.onPointerDown(
		{
			entity: clickCube,
			opts: { button: InputAction.IA_POINTER, hoverText: '카메라 재설정' },
		},
		() => {
			// 카메라를 기본 동작으로 재설정
			const mainCamera = MainCamera.getMutable(engine.CameraEntity)
			mainCamera.virtualCameraEntity =
				mainCamera.virtualCameraEntity == myCustomCamera1
					? myCustomCamera2
					: myCustomCamera1
		}
	)
}

전환은 경로상의 장애물을 고려하지 않고 항상 직선으로 이동합니다. 대신 다른 가상 카메라를 중간 단계로 사용하여 수동으로 전환을 만들 수 있으며, 그렇게 하면 이동을 완전히 제어할 수 있습니다. 이 중간 가상 카메라는 Tween 을 수행하여 첫 번째 카메라 위치에서 두 번째 카메라 위치로 이동하거나, 장애물을 피하거나 시네마틱한 우회를 포함하는 더 커스텀한 경로를 따를 수 있습니다.

카메라 따라가기

가상 카메라가 항상 플레이어나 씬의 특정 엔티티 방향을 바라보도록 설정할 수 있습니다. 카메라 위치는 고정되지만, 회전은 해당 엔티티가 항상 중앙에 오도록 변경됩니다.

이는 다음을 사용해 구현할 수 있습니다. lookAtEntity 속성을 VirtualCamera 구성 요소에서 사용합니다. 플레이어를 따라가려면 다음을 사용하세요. 예약된 엔티티 engine.PlayerEntity.

const myCustomCamera1 = engine.addEntity()
Transform.create(myCustomCamera1, {
	position: Vector3.create(1, 2, 1),
})
VirtualCamera.create(myCustomCamera1, {
	lookAtEntity: engine.PlayerEntity,
})

카메라가 엔티티를 따라가는 경우, 이는 회전만 변경하며 카메라의 위치는 변경하지 않습니다.

카메라가 회전해도 VirtualCamera 구성 요소가 있는 엔티티의 Transform은 변경되지 않습니다. 그러나 engine.CameraEntity의 Transform에서 카메라 회전을 읽을 수 있습니다. 이 엔티티의 회전과 위치는 절대적이며, VirtualCamera 구성 요소가 있는 엔티티의 상태에 영향을 받지 않습니다. 이 Transform의 회전은 다음의 lookAtEntity 동작의 영향을 받습니다.

📔 참고: 가상 카메라를 lookAtEntity 가상 카메라가 있는 동일한 엔티티나 engine.CameraEntity 엔티티를 참조하는 것으로 설정하면, 결과 동작은 엔티티를 전혀 할당하지 않은 것과 같습니다.

플레이어에 부착하기

가상 카메라의 또 다른 용도는 가상 카메라를 플레이어 엔티티에 부착하여, 사용자 정의 거리나 각도에서 플레이어를 따라가게 하는 것입니다. 플레이어는 카메라의 회전을 자유롭게 변경할 수 없으므로, 이 경우 카메라의 회전은 가상 카메라의 회전에 고정됩니다. 이는 예를 들어 플레이어가 항상 앞으로 바라봐야 하는 레이싱 게임에 유용할 수 있습니다.

function main() {
	const myCustomCamera = engine.addEntity()
	Transform.create(myCustomCamera, {
		position: Vector3.create(0, 1, 5),
		parent: engine.PlayerEntity,
	})
	VirtualCamera.create(myCustomCamera, {
		defaultTransition: { transitionMode: VirtualCamera.Transition.Time(2) },
	})

	const mainCamera = MainCamera.createOrReplace(engine.CameraEntity, {
		virtualCameraEntity: myCustomCamera,
	})
}

카메라와 콜라이더

플레이어의 카메라가 3인칭 모드로 움직일 때, 카메라는 엔티티에 할당된 충돌 레이어에 따라 콜라이더에 의해 막히거나 그렇지 않을 수 있습니다. 씬을 설계할 때 이 점에 유의하세요. 카메라가 벽이나 다른 엔티티를 통과하지 못하게 하려는 경우가 있을 수 있습니다.

다음을 참조하세요. 콜라이더 씬에서 콜라이더를 구성하는 방법에 대한 자세한 내용은.

관전자 모드(오브저버 카메라)

일반적인 아바타 이동에서 자유롭게 이동하는 카메라 또는 플레이어를 따라가는 카메라로 플레이어를 전환하는 관전 모드를 만들 수 있습니다. 이는 경쟁 게임의 관전자 역할, 라이브 이벤트의 디렉터 카메라, 또는 리플레이 시스템에 유용합니다.

이 패턴은 여러 SDK 기능을 결합합니다.

기능	SDK API	목적
커스텀 카메라 뷰	VirtualCamera + MainCamera	플레이어의 카메라를 대체함
아바타 이동 고정	InputModifier (disableAll: true)	WASD를 카메라 조작용으로 해제함
씬의 플레이어 추적	onEnterScene / onLeaveScene	추적 대상 명단을 구축함
카메라 제어	inputSystem.isPressed(InputAction.IA_*)	WASD로 피치/요 조절, E/F로 확대/축소
마우스 룩	PrimaryPointerInfo.screenDelta	마우스로 카메라 회전

카메라 리그 아키텍처

다음을 사용하세요. 두 엔티티 리그 그래서 요와 피치가 서로 독립적으로 유지됩니다.

rigRoot (엔티티)           -- 월드 위치 + 요 회전
└── rigCamera (자식)      -- 피치 회전 + 궤도 오프셋
    └── VirtualCamera

rigRoot 요(좌우 회전)를 담당하며, 따라가는 대상 또는 자유 카메라 기준점 쪽으로 lerp됩니다. rigCamera 피치(위/아래 기울기)와 루트로부터의 궤도 거리를 처리합니다. 요와 피치를 두 개의 Transform으로 분리하면 오일러 계산이 단순해집니다.

활성화 및 비활성화

// 관전자 모드 활성화
const rigRoot = engine.addEntity()
Transform.create(rigRoot, {
  position: Vector3.create(8, 8, 8),
  rotation: Quaternion.fromEulerDegrees(0, 0, 0),
})

const rigCamera = engine.addEntity()
Transform.create(rigCamera, { parent: rigRoot })
VirtualCamera.create(rigCamera, {})

MainCamera.createOrReplace(engine.CameraEntity, { virtualCameraEntity: rigCamera })
InputModifier.createOrReplace(engine.PlayerEntity, {
  mode: InputModifier.Mode.Standard({ disableAll: true }),
})

// 관전자 모드 비활성화
// 중요: VirtualCamera 엔티티를 제거하기 전에 먼저 MainCamera를 해제하세요.
// 엔티티를 먼저 제거하면 엔진이 죽은 엔티티에 계속 연결된 상태로 남아
// 화면이 플레이어의 발쪽으로 떨어집니다.
const mainCamera = MainCamera.getMutableOrNull(engine.CameraEntity)
if (mainCamera) mainCamera.virtualCameraEntity = undefined

engine.removeEntity(rigCamera)
engine.removeEntity(rigRoot)

InputModifier.createOrReplace(engine.PlayerEntity, {
  mode: InputModifier.Mode.Standard({ disableAll: false }),
})

경고: 항상 MainCamera.virtualCameraEntity 를 카메라 엔티티를 제거하기 전에 해제하세요. 엔티티를 먼저 제거하면 엔진이 죽은 참조를 가리키게 되어 화면이 깨집니다.

카메라 경계

엔진은 VirtualCamera 엔티티가 씬의 parcel 경계를 벗어나면 비활성화합니다. 카메라가 씬 범위를 벗어나면 조용히 작동을 멈춥니다. 매 프레임마다 카메라 위치를 씬의 축 정렬 경계 상자(AABB) 안에 작은 여유를 두고 유지하도록 제한하세요.

// 1x1 parcel 씬(16m x 16m)의 예시 경계
const BOUNDS_MIN = Vector3.create(0, 0, 0)
const BOUNDS_MAX = Vector3.create(16, 20, 16)
const BOUNDS_MARGIN = 0.5

더 큰 씬의 경우 경계를 다음에 맞게 설정하세요. scene.json parcel. 씬 높이 제한은 parcel 수와 상관없이 330미터입니다. 4x4 parcel 씬에는 다음을 사용할 수 있습니다. Vector3.create(64, 330, 64).

플레이어 따라가기

다음을 사용하세요. onEnterScene 와 onLeaveScene 씬에 있는 플레이어의 실시간 명단을 만들기 위해 사용하세요. 그러면 플레이어는 키로 추적 대상을 순환할 수 있습니다(예: IA_ACTION_3 와 IA_ACTION_4). 플레이어를 따라갈 때 리그 루트는 따라가는 플레이어의 Transform 위치 쪽으로 lerp되고, 자식 카메라는 설정 가능한 거리에서 궤도 이동합니다.

import { onEnterScene, onLeaveScene } from '@dcl/sdk/src/players'

const playerEntities = new Map<string, Entity>()
let playerIds: string[] = []

onEnterScene((player) => {
  if (!player) return
  playerIds.push(player.userId)
  playerEntities.set(player.userId, player.entity)
})

onLeaveScene((userId) => {
  if (!userId) return
  playerIds = playerIds.filter((id) => id !== userId)
  playerEntities.delete(userId)
})

매 프레임 플레이어를 따라가려면 리그 루트를 해당 위치 쪽으로 lerp하세요.

const followEntity = playerEntities.get(followTargetId)
if (followEntity) {
  const targetPos = Transform.get(followEntity).position
  const rootTransform = Transform.getMutable(rigRoot)
  rootTransform.position = Vector3.lerp(
    rootTransform.position,
    Vector3.add(targetPos, Vector3.create(0, 1, 0)),
    0.1
  )
}

다음을 참조하세요. 플레이어가 씬에 들어오거나 나감 에 대해 더 자세히 알아보려면 onEnterScene 와 onLeaveScene.

관전 중 마우스 룩

다음을 읽으세요. PrimaryPointerInfo.screenDelta 매 프레임 읽어 마우스로 카메라를 회전시키세요. 이 기능은 포인터가 잠겨 있을 때도 작동합니다. 자세한 내용은 다음을 참조하세요. 마우스 움직임 을 참조하세요.

const MOUSE_SENSITIVITY = 0.15 // 픽셀당 도
let yaw = 0
let pitch = 45

function spectateMouseLook() {
  const isLocked = PointerLock.getOrNull(engine.CameraEntity)?.isPointerLocked ?? false
  if (!isLocked) return

  const delta = PrimaryPointerInfo.getOrNull(engine.RootEntity)?.screenDelta
  if (!delta) return

  yaw = (yaw + delta.x * MOUSE_SENSITIVITY) % 360
  // delta.y는 아래쪽으로 증가하므로, 마우스를 위로 움직이면 음수입니다: 이를 더하면 카메라가 위로 기울어집니다; 뒤집힘을 방지하려고 제한합니다
  pitch = Math.max(-25, Math.min(80, pitch + delta.y * MOUSE_SENSITIVITY))
}

참고: screenDelta 데스크톱 전용입니다. 모바일에서는 항상 보고합니다 0. 장면이 모바일을 대상으로 한다면 터치 기반 대체 방식을 설계하세요.

전체 참고 구현

그 33,20-spectate-mode 테스트 씬에는 다음에 자가 포함된 spectate 모듈이 들어 있습니다 src/spectate.ts. free-cam 및 follow-cam 모드, WASD + 마우스 시선 조작, 플레이어 순환, 궤도 거리 줌, 경계 제한, 그리고 조작법과 현재 추적 대상을 보여주는 온스크린 HUD를 지원합니다.

자신의 프로젝트에서 사용하려면:

1. 복사하세요 src/spectate.ts 장면에.

2. 업데이트하세요 PIVOT, BOUNDS_MIN, 그리고 BOUNDS_MAX 파일 상단에서 장면의 parcel에 맞게 설정하세요. 이것이 가장 흔한 통합 실수입니다.

3. 연결하세요 toggleSpectate() 를 클릭 가능한 엔티티, UI 버튼, 또는 키 입력 같은 어떤 트리거에도.

💡 팁: 카메라 제어의 동작 예시를 보려면 다음을 참조하세요: 2,22-virtual-cameras 테스트 씬은 여러 VirtualCamera 엔티티를 다음 사이에서 순환시킵니다 MainCamera 포함하여 lookAtEntity 플레이어를 향하는 카메라와 트윈 처리된 카메라; 32,20-virtual-camera-mouse-look포인터가 잠겨 있는 동안 마우스 룩 카메라를 제어합니다; 33,20-spectate-modefollow-cam 및 free-cam 모드를 갖춘 완전한 spectate/observer 카메라를 구현합니다; 그리고 9,99-modifier-areas볼륨 내부에서 카메라 모드를 강제로 적용하는 CameraModeArea.