Camera Setup for glTF Model Positioning in Three.js

Based on your requirements to position a glTF model with its bottom center at the origin (0,0,0) while displaying it on the right side of the screen, here's how you can approach this:

Camera and Model Positioning Strategy

To achieve your desired layout with the model on the right and space for captions on the left, you'll need to:

1. Position the model correctly at the origin
2. Set up the camera to view the model from an angle that places it on the right side of the viewport

Model Positioning

First, ensure your model's bottom center is at the origin:

JAVASCRIPTCopied
// After loading your glTF model
model.position.set(0, 0, 0);

// If your model's pivot point isn't at its bottom center, you may need to adjust:
// Calculate the offset needed to place bottom center at origin
// This depends on your model's bounding box
const box = new THREE.Box3().setFromObject(model);
const centerOffset = new THREE.Vector3();
box.getCenter(centerOffset);
centerOffset.y = box.min.y; // Keep only the Y offset for bottom center
model.position.sub(centerOffset);

Camera Setup

For the camera setup to view the model from the right side:

JAVASCRIPTCopied
// Using PerspectiveCamera
const camera = new THREE.PerspectiveCamera(
  45, // Field of view
  window.innerWidth / window.innerHeight, // Aspect ratio
  0.1, // Near clipping plane
  1000 // Far clipping plane
);

// Position camera to view the model from an angle that places it on the right
camera.position.set(5, 2, 5); // Adjust these values based on your model size
camera.lookAt(0, 0, 0); // Look at the origin where model's bottom center is

Fine-tuning the View

You may need to adjust these values based on your specific model and viewport size:

JAVASCRIPTCopied
// To shift the view more to the right
camera.position.x = 7; // Increase to move camera more to the left, showing model on right

// If needed, you can offset the lookAt point slightly
camera.lookAt(1, 0, 0); // Look slightly to the right of origin

// Alternatively, you can use a scene offset approach
scene.position.x = 2; // Shifts entire scene to the right

Remember that the exact values will depend on your model's size and the specific layout you want to achieve. You may need to experiment with different camera positions and angles to get the perfect framing.