Two-Point Perspective in Three.js

To implement a two-point perspective where vertical lines remain parallel (as shown in your reference image from Formit), you'll want to use an OrthographicCamera with specific configuration.

Approach

The key to achieving this effect is to use an orthographic projection along the vertical axis while maintaining perspective on the horizontal axes. This is essentially what a two-point perspective does - it keeps vertical lines parallel while horizontal lines converge to vanishing points.

Implementation

Here's how you can implement this:

1. Use an OrthographicCamera for your scene
2. Position the camera appropriately to get the desired angle
3. Adjust the camera's rotation to maintain vertical lines as parallel

JAVASCRIPTCopied
// Create an orthographic camera
const width = window.innerWidth;
const height = window.innerHeight;
const aspectRatio = width / height;
const frustumSize = 10;

const camera = new THREE.OrthographicCamera(
  frustumSize * aspectRatio / -2,
  frustumSize * aspectRatio / 2,
  frustumSize / 2,
  frustumSize / -2,
  0.1,
  1000
);

// Position the camera to achieve the two-point perspective effect
camera.position.set(20, 20, 20);

// Important: Rotate the camera to look at your scene
// but maintain vertical lines as parallel
camera.lookAt(0, 0, 0);

// To ensure vertical lines stay perfectly vertical,
// you may need to adjust the camera's rotation
// This depends on your specific scene orientation
camera.rotation.z = 0; // Keep vertical lines vertical

You may need to fine-tune the camera position and rotation based on your specific scene and desired viewpoint.

Alternative Approach

If you need more control, you could also use a custom projection matrix with a PerspectiveCamera, but the orthographic approach is generally simpler for achieving this specific effect.

Remember that camera controls (like OrbitControls) might need to be customized to maintain this specific perspective as the user navigates the scene.