I’m working on a Three.js project where I need a third-person camera setup that follows a 3D model as it moves around the scene. I have a basic implementation with animations and controls, but I’m struggling to make the camera follow the model properly. Here’s a summary of what I’m trying to achieve and the current issues I’m facing:
Problem Summary:
I want the camera to follow the model from a third-person perspective. Specifically, as the model moves in different directions (forward, backward, left, right), the camera should always follow the model while maintaining a fixed distance and orientation.
Current Implementation:
<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { onMounted, ref } from 'vue';
const container3D = ref(null);
onMounted(() => {
let object, mixer, walkAction, shutdownAction, CycleBackAction, jumpAction;
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
const cameraOffset = new THREE.Vector3(0, 30, -50);
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 5000);
scene.add(camera);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container3D.value.appendChild(renderer.domElement);
const loader = new GLTFLoader();
loader.load(
'/medium_mech_striker/scene.gltf',
(gltf) => {
object = gltf.scene;
object.scale.set(10, 10, 10);
object.position.y = -200;
object.rotateY(Math.PI);
object.frustumCulled = false;
scene.add(object);
// Setup animations
mixer = new THREE.AnimationMixer(object);
gltf.animations.forEach((clip) => {
if (clip.name === 'a5WalkCycle') {
walkAction = mixer.clipAction(clip);
walkAction.setEffectiveTimeScale(1); // Adjust this value to control the speed of the walk animation
} else if (clip.name === 'a1ShutdownPose') {
shutdownAction = mixer.clipAction(clip);
} else if (clip.name === 'a6WalkCycleBack') {
CycleBackAction = mixer.clipAction(clip);
} else if (clip.name === 'a8Jump') {
jumpAction = mixer.clipAction(clip);
}
});
// Start with shutdown animation
if (shutdownAction) {
shutdownAction.play();
}
},
undefined,
(error) => {
console.error('An error happened while loading the GLTF model:', error);
}
);
// Create plane mesh
const planeGeometry = new THREE.PlaneGeometry(10000, 10000);
planeGeometry.rotateX(-Math.PI / 2);
const planeMaterial = new THREE.ShadowMaterial({ color: 0x000000, opacity: 0.2 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
scene.add(plane);
const GridHelper = new THREE.GridHelper(2000, 100);
GridHelper.position.y = -199;
GridHelper.material.opacity = 0.25;
GridHelper.material.transparent = true;
scene.add(GridHelper);
// Light
scene.add(new THREE.AmbientLight(0xf0f0f0, 3));
const light = new THREE.SpotLight(0xffffff, 4.5);
light.position.set(0, 1500, 200);
light.angle = Math.PI * 0.2;
light.decay = 0;
light.castShadow = true;
light.shadow.camera.near = 200;
light.shadow.camera.far = 2000;
light.shadow.bias = -0.000222;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
scene.add(light);
// Orbit controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.screenSpacePanning = false;
// Handle keyboard input
const keys = {};
window.addEventListener('keydown', (event) => {
keys[event.key] = true;
});
window.addEventListener('keyup', (event) => {
keys[event.key] = false;
});
// Animation function
function animate() {
requestAnimationFrame(animate);
// Update mixer if defined
if (mixer) {
mixer.update(0.03); // Adjust this value to control the overall animation update speed
}
// Handle animations
if (object) {
if (keys['w']) {
if (shutdownAction && shutdownAction.isRunning()) {
shutdownAction.stop();
}
if (walkAction && !walkAction.isRunning()) {
walkAction.play();
}
if (keys['d']) {
object.rotation.y += 0.05;
} else if (keys['a']) {
object.rotation.y -= 0.05;
} else if (keys[' ']) {
if (!jumpAction.isRunning()) jumpAction.play();
} else {
if (jumpAction.isRunning()) jumpAction.stop();
}
const direction = new THREE.Vector3();
object.getWorldDirection(direction);
object.position.addScaledVector(direction, 1);
} else if (keys['s']) {
if (walkAction && walkAction.isRunning()) {
walkAction.stop();
}
if (CycleBackAction && !CycleBackAction.isRunning()) {
CycleBackAction.play();
}
const direction = new THREE.Vector3();
object.getWorldDirection(direction);
object.position.addScaledVector(direction, -1);
} else {
if (walkAction && walkAction.isRunning()) {
walkAction.stop();
}
if (shutdownAction && !shutdownAction.isRunning()) {
shutdownAction.play();
}
if (CycleBackAction && CycleBackAction.isRunning()) {
CycleBackAction.stop();
}
}
}
// Update camera position to follow the object
const objectPosition = new THREE.Vector3();
object.getWorldPosition(objectPosition);
// Calculate camera position based on object position and offset
const offset = cameraOffset.clone();
offset.applyMatrix4(object.matrixWorld);
camera.position.copy(objectPosition).add(offset);
// Ensure camera always faces the object
camera.lookAt(objectPosition);
controls.update();
renderer.render(scene, camera);
}
// Start animation
animate();
// Adjust camera and renderer size when window is resized
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
});
</script>
Issue:
The camera currently doesn’t follow the model’s movements. The camera remains static and doesn’t adjust its position or orientation based on the model’s position or rotation.
What I’ve Tried:
I have set up the camera and renderer properly.
I’ve implemented animation controls for moving and rotating the model.
I’ve used OrbitControls to manage the camera view.
Questions:
How can I modify the camera setup so that it follows the model from a third-person perspective?
What changes are needed in the code to ensure that the camera maintains a fixed distance from the model while it moves around?
Any guidance or suggestions would be greatly appreciated. Thank you!
