vue3使用threejs给模型添加贴图无法显示

Question

当我给一个模型一个区域添加贴图时，贴图无法显示，我点击想要贴图的区域时，显示name是"物件_63" 打印出来也就是"贴图测试"的children[0],但是我用"物件_63"去添加贴图时，我都没办法控制模型了，还报最后一张图片的错误，请问一下我该怎么解决这个问题

const loadOBJ = () => {
      const loader = new FBXLoader();
      loader.load(
        "/src/assets/image/three/test2.fbx",
        (mesh) => {
          mesh.scale.set(0.005, 0.005, 0.005);
          console.log(mesh);
          // 添加到场景
          scene.add(mesh);

          mesh.traverse((child) => {
            if (child.name === "贴图测试") {
              let material = new MeshPhongMaterial({
                map: state.img,
              });
              console.log(child);
              child.material = material;
            }
          });

          loadedMesh = mesh;
        },
        (xhr) => {
          // 加载进度
          if (xhr.lengthComputable) {
            const percentComplete = (xhr.loaded / xhr.total) * 100;
            console.log(Math.round(percentComplete, 2) + "%");
          }
        }
      );
    };

    const raycaster = new Raycaster();
    const mouse = new Vector2();
    const onMouseClick = (event) => {
      // 计算鼠标在屏幕中的位置
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

      // 通过鼠标位置和相机创建射线
      raycaster.setFromCamera(mouse, camera);

      // 检测与模型相交的子物体
      const intersects = raycaster.intersectObjects(loadedMesh.children, true);

      if (intersects.length > 0) {
        // 显示弹框或其他操作
        alert("点击了模型的子物体：" + intersects[0].object.name);
      }
    };

    window.addEventListener("click", onMouseClick);

Answer 1

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7501947
• 除此之外, 这篇博客: vue3父组件页面向子组件页面传参，调用子组件方法；子组件向父组件传参，调用父组件方法。实现简单，看完不迷糊中的 二.父组件向子组件传参，改变子组件变量的值 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 实际应用：点击按钮打开弹窗
  1.父组件加入一个按钮

   <el-form-item>
        <el-button type="success" @click="onAdd">新增供应商</el-button>
      </el-form-item>
  

  2.父组件写点击事件

  const onAdd = () => {
      // 父调用子属性其前提是子类已经暴露 drawer改变他的值为true显示弹窗
      AddVueRef.value.drawer = true;
      // 父调子类已经暴露 子方法
      AddVueRef.value.test("父调子方法");
  };
  

  3.子组件暴露属性，方便父类调用

  // 子类暴露属性，方便父类调用
  defineExpose({ drawer});
  

  扩展：父组件调用子组件的方法
  1.子组件定义一个测试的方法 m传参

  const test =(m)=>{
      alert(m)
  }
  

  2.暴露方法

  defineExpose({ test });
  

  2.父调子类已经暴露 的方法

  AddVueRef.value.test("父调子方法");