Fixing Model Placement in Three.js

When replacing placeholder bounding boxes with actual 3D models in Three.js, the floating issue you're experiencing is likely due to differences in how the models are centered or positioned within their own coordinate systems. Here are some approaches to solve this problem:

Understanding the Issue

The key issue is that your placeholder bounding boxes and your actual furniture models likely have different origins or pivot points. While the bounding boxes might be positioned with their bottom face on the floor, the furniture models might have their origin at their center or elsewhere.

Solutions

1. Adjust Model Position Based on Bounding Box

JAVASCRIPTCopied
function replaceWithModel(placeholder, modelPath) {
  const loader = new GLTFLoader();
  
  loader.load(modelPath, (gltf) => {
    const model = gltf.scene;
    
    // Copy transformation from placeholder
    model.position.copy(placeholder.position);
    model.rotation.copy(placeholder.rotation);
    model.scale.copy(placeholder.scale);
    
    // Calculate bounding box of the new model
    const bbox = new THREE.Box3().setFromObject(model);
    const modelHeight = bbox.max.y - bbox.min.y;
    
    // Adjust Y position to place bottom of model on floor
    // Assuming placeholder's position is at its center
    const placeholderBbox = new THREE.Box3().setFromObject(placeholder);
    const placeholderBottom = placeholderBbox.min.y;
    
    // Set model's bottom to match placeholder's bottom
    model.position.y += placeholderBottom - bbox.min.y;
    
    // Replace placeholder with model
    placeholder.parent.add(model);
    placeholder.parent.remove(placeholder);
  });
}

2. Create a Container Group

JAVASCRIPTCopied
function replaceWithModel(placeholder, modelPath) {
  const loader = new GLTFLoader();
  
  loader.load(modelPath, (gltf) => {
    // Create a container to maintain the placeholder's position
    const container = new THREE.Group();
    container.position.copy(placeholder.position);
    container.rotation.copy(placeholder.rotation);
    container.scale.copy(placeholder.scale);
    
    const model = gltf.scene;
    
    // Calculate bounding box of the model
    const bbox = new THREE.Box3().setFromObject(model);
    
    // Offset the model within the container so its bottom is at y=0
    model.position.y -= bbox.min.y;
    
    // Add model to container and replace placeholder
    container.add(model);
    placeholder.parent.add(container);
    placeholder.parent.remove(placeholder);
  });
}

3. Normalize Models Before Import

If possible, preprocess your models to ensure they all have a consistent origin point (e.g., bottom center) before importing them into your engine.

Additional Considerations

• Check if your models have different units (e.g., meters vs. centimeters)
• Ensure your GLTFLoader is properly configured
• Consider using the onLoad callback of the GLTFLoader to perform adjustments after loading

By implementing one of these approaches, you should be able to correctly position your furniture models on the floor, matching the placement of your placeholder bounding boxes.