当我给一个模型一个区域添加贴图时,贴图无法显示,我点击想要贴图的区域时,显示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);
实际应用:点击按钮打开弹窗
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("父调子方法");