GLTF模型子对象操控求助：设置Cube1透明度触发undefined错误

Hey there! Let's figure out why you're hitting that undefined error when trying to set opacity on your GLTF cubes. The issue boils down to a common gotcha with Three.js and GLTF objects—opacity is a property of the mesh's material, not the object itself. You were trying to set it directly on the cube1 object, which doesn't have an opacity property, hence the error.

Here's how to fix this step by step:

1. First, confirm what you're actually grabbing #

First, let's make sure you're targeting the right thing. Add a console.log(cube1); right after you fetch the object. You'll probably see one of two things:

• A Mesh object (this is the actual 3D mesh with geometry and material)
• A Group object (a parent node that contains the mesh as a child, common in GLTF exports)

2. Fix opacity for a direct Mesh object #

If cube1 is a Mesh, you need to access its material to set opacity. Also, you have to enable transparency first—otherwise, the opacity value won't do anything:

const cube1 = gltf.scene.getObjectByName('Cube1');
if (cube1.isMesh) {
  // Enable transparency (required for opacity to work)
  cube1.material.transparent = true;
  // Set opacity (0 = fully transparent, 1 = fully opaque)
  cube1.material.opacity = 0.5;
  // Force the material to update (sometimes needed after changes)
  cube1.material.needsUpdate = true;
}

3. Fix opacity for a Group/parent object #

If cube1 is a Group (a container for the mesh), you'll need to traverse its children to find the actual Mesh and update its material:

const cube1 = gltf.scene.getObjectByName('Cube1');
cube1.traverse(child => {
  // Only target mesh objects
  if (child.isMesh) {
    child.material.transparent = true;
    child.material.opacity = 0.3;
    child.material.needsUpdate = true;
  }
});

4. Setting scale (this one's simpler!) #

Scale is a property of the base Object3D class, so it works directly on either a Mesh or Group. You can set it in a few ways:

// Set uniform scale on all axes
cube1.scale.set(2, 2, 2); // Doubles the size

// Or set individual axes
cube1.scale.x = 1.5;
cube1.scale.y = 0.8;

Quick notes to avoid future issues #

• Name case sensitivity: GLTF object names are case-sensitive! Make sure 'Cube1' matches exactly what's in your GLTF file.
• Multiple materials: If your mesh uses multiple materials, loop through child.material (if it's an array) instead of treating it as a single object.
• Material types: Most GLTF materials are MeshStandardMaterial, which supports transparent and opacity—no extra setup needed beyond what's above.

Here's a full working example to tie it all together:

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
// ... set up your renderer, camera, lights here ...

const loader = new GLTFLoader();
loader.load('your-model.gltf', (gltf) => {
  scene.add(gltf.scene);

  // Get Cube1 and modify it
  const cube1 = gltf.scene.getObjectByName('Cube1');
  if (!cube1) {
    console.error("Can't find Cube1! Double-check the object name in your GLTF.");
    return;
  }

  // Update opacity
  cube1.traverse(child => {
    if (child.isMesh) {
      child.material.transparent = true;
      child.material.opacity = 0.4;
      child.material.needsUpdate = true;
    }
  });

  // Scale Cube2
  const cube2 = gltf.scene.getObjectByName('Cube2');
  if (cube2) {
    cube2.scale.set(0.7, 0.7, 0.7); // Shrink to 70% size
  }
});

That should get your transparency and scaling working as expected!

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