Creating a Virtual Showroom with Three.js Controls

For your virtual showroom project where you need both camera control and mouse interaction, you'll need to combine different control approaches. Based on the Google Arts & Culture example you shared, I can suggest some approaches using Three.js controls.

Recommended Approach

For a virtual showroom with walking capabilities and mouse interaction without pointer lock, you might want to consider a hybrid approach:

1. First-person movement: Use keyboard controls (WASD/arrow keys) for walking
2. Camera rotation: Use mouse movement for looking around, but only when a specific condition is met (like holding right mouse button)
3. Mouse interaction: Keep the pointer available for selection when not controlling the camera

Control Options in Three.js

From the available controls in Three.js, you could consider:

• FirstPersonControls: Provides walking and looking functionality, but typically uses the entire mouse area
• FlyControls: Similar to FirstPersonControls but with more freedom of movement
• OrbitControls: Good for object inspection but not ideal for walking simulations
• ArcballControls: Provides intuitive navigation with touch support and advanced features

Custom Implementation

You'll likely need a custom implementation that combines elements from these controls:

JAVASCRIPTCopied
// Basic setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Movement variables
const moveSpeed = 0.1;
const rotateSpeed = 0.002;
const keys = { forward: false, backward: false, left: false, right: false };
let isRotating = false; // Track if right mouse button is pressed
let previousMouseX = 0;

// Set up key listeners
document.addEventListener('keydown', (e) => {
  switch(e.key.toLowerCase()) {
    case 'w': case 'arrowup': keys.forward = true; break;
    case 's': case 'arrowdown': keys.backward = true; break;
    case 'a': case 'arrowleft': keys.left = true; break;
    case 'd': case 'arrowright': keys.right = true; break;
  }
});

document.addEventListener('keyup', (e) => {
  switch(e.key.toLowerCase()) {
    case 'w': case 'arrowup': keys.forward = false; break;
    case 's': case 'arrowdown': keys.backward = false; break;
    case 'a': case 'arrowleft': keys.left = false; break;
    case 'd': case 'arrowright': keys.right = false; break;
  }
});

// Mouse control for camera rotation (only when right button is pressed)
renderer.domElement.addEventListener('mousedown', (e) => {
  if (e.button === 2) { // Right mouse button
    isRotating = true;
    previousMouseX = e.clientX;
  }
});

renderer.domElement.addEventListener('mouseup', (e) => {
  if (e.button === 2) {
    isRotating = false;
  }
});

renderer.domElement.addEventListener('mousemove', (e) => {
  if (isRotating) {
    const deltaX = e.clientX - previousMouseX;
    camera.rotation.y -= deltaX * rotateSpeed;
    previousMouseX = e.clientX;
  }
});

// Prevent context menu on right-click
renderer.domElement.addEventListener('contextmenu', (e) => {
  e.preventDefault();
});

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  
  // Handle movement
  const direction = new THREE.Vector3();
  const rotation = camera.rotation.y;
  
  if (keys.forward) {
    direction.z -= Math.cos(rotation) * moveSpeed;
    direction.x -= Math.sin(rotation) * moveSpeed;
  }
  if (keys.backward) {
    direction.z += Math.cos(rotation) * moveSpeed;
    direction.x += Math.sin(rotation) * moveSpeed;
  }
  if (keys.left) {
    direction.z += Math.sin(rotation) * moveSpeed;
    direction.x -= Math.cos(rotation) * moveSpeed;
  }
  if (keys.right) {
    direction.z -= Math.sin(rotation) * moveSpeed;
    direction.x += Math.cos(rotation) * moveSpeed;
  }
  
  camera.position.add(direction);
  
  renderer.render(scene, camera);
}

animate();

Additional Considerations

1. Object interaction: Add raycasting for object selection and interaction
2. Collision detection: Implement collision detection to prevent walking through walls
3. Smooth transitions: Add easing functions for smoother camera movements
4. Mobile support: Consider adding touch controls for mobile devices

This approach should give you a good starting point for creating a virtual showroom with both navigation and interaction capabilities similar to the Google Arts & Culture example.