ThreeJS能否对JSON/OBJ模型实现图层的隐藏与显示？

Absolutely! You can definitely pull off this layer-based visibility approach for your shirt button types in Three.js—whether you're working with JSON or OBJ models. Here's a breakdown of how to make it work:

At its core, any model you load into Three.js ends up as a hierarchy of THREE.Object3D (or THREE.Mesh) objects. Instead of separate full models, you’ll embed all button types as distinct child objects within your main shirt model, then toggle their visible property based on user selection.

For JSON Models #

JSON models (especially those exported with Three.js’s native format) maintain their object hierarchy when loaded. The key is to name each button group clearly in your 3D modeling tool before exporting.

// Load your JSON shirt model
const loader = new THREE.ObjectLoader();
loader.load('shirt-with-buttons.json', (shirtModel) => {
  scene.add(shirtModel);
  window.shirtModel = shirtModel; // Store for later use

  // Initialize visibility: show round buttons, hide others
  shirtModel.getObjectByName('button-round').visible = true;
  shirtModel.getObjectByName('button-square').visible = false;
  shirtModel.getObjectByName('button-custom').visible = false;
});

// Handle user button selection
function toggleButtonType(selectedType) {
  // First, hide all button groups
  ['round', 'square', 'custom'].forEach(type => {
    shirtModel.getObjectByName(`button-${type}`).visible = false;
  });
  // Show the selected one
  shirtModel.getObjectByName(`button-${selectedType}`).visible = true;
}

For OBJ Models #

OBJ models load as a THREE.Group containing individual THREE.Mesh objects for each part. Again, naming your button meshes uniquely in your 3D tool is critical here.

const loader = new THREE.OBJLoader();
loader.load('shirt-with-buttons.obj', (shirtGroup) => {
  scene.add(shirtGroup);
  window.shirtGroup = shirtGroup;

  // Initialize visibility: default to round buttons
  shirtGroup.traverse(child => {
    if (child.isMesh && child.name.startsWith('button-')) {
      child.visible = child.name === 'button-round';
    }
  });
});

// Toggle function for OBJ models
function toggleButtonType(selectedType) {
  shirtGroup.traverse(child => {
    if (child.isMesh && child.name.startsWith('button-')) {
      child.visible = child.name === `button-${selectedType}`;
    }
  });
}

Pro Tips & Notes #

• Model Naming is Key: Spend time naming each button component clearly in your 3D software (Blender, Maya, etc.)—this makes it trivial to find and toggle them in Three.js.
• Traverse for Deep Hierarchies: If your buttons are nested inside other groups (like a "details" group), use the traverse() method to loop through all child objects, ensuring you don’t miss any hidden components.
• Performance vs. File Size: This approach keeps all button geometry in one model, so you avoid the overhead of loading/unloading separate models. The tradeoff is a slightly larger single model file, which is usually worth it for smoother user interactions.
• Skip THREE.Layers: While Three.js has a Layer system, it’s designed for camera-based visibility filtering (e.g., hiding entire groups from specific cameras). For your use case, directly toggling the visible property is simpler and more efficient.

内容的提问来源于stack exchange，提问作者Eshiett