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

当我给一个模型一个区域添加贴图时,贴图无法显示,我点击想要贴图的区域时,显示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);

img

img

img

  • 这个问题的回答你可以参考下: 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("父调子方法");