three.js 场景标签绑定模型坐标

1、场景标签静态绑定模型坐标位置，意思就是绑定在静态模型（无动画）的世界坐标上

const loader = new GLTFLoader();
loader.load( './model/RobotExpressive.glb', function ( gltf ) {	
    model = gltf.scene;
    model.scale.set(35, 35, 35); // 设置模型的缩放比例
	mixer = new THREE.AnimationMixer(model);// 获取动画混合器
    //1、先获取模型的所有名称
    model.traverse((child) => {
	console.log('获取模型的所有名称:', child.name);
    });	

    // 2、得到所有模型的名称后，选取模型某个部位的名称
	const objectToAttachLabel = model.getObjectByName('Palm1L');
    
     // 3、根据模型某个部位的名称获取它的世界坐标，并将标签的世界坐标设置为的模型某个部位的世界坐标
    if (objectToAttachLabel) {
       const position = new THREE.Vector3();// 获取特定部位的世界坐标
       objectToAttachLabel.getWorldPosition(position);
       tag.position.copy(position);// 将标签的位置设置为特定部位的世界坐标
       scene.add(tag);
    } else {
       console.error('未找到指定部位的模型对象。');
    }
});

我获取的是模型的手部名称，所以标签就绑定在手部了

2、场景标签随模型动画更新坐标位置 

 

const loader = new GLTFLoader();
	loader.load( './model/RobotExpressive.glb', function ( gltf ) {
		model = gltf.scene;
        model.scale.set(35, 35, 35); // 设置模型的缩放比例
		mixer = new THREE.AnimationMixer(model);// 获取动画混合器

        // 开始播放动画并在动画更新时更新标签位置
		function animate() {
			requestAnimationFrame(animate);
			// 更新动画混合器
			const delta = clock.getDelta(); // 获取时间差
			mixer.update(delta); // 更新动画混合器
			// 获取特定部位的对象
			const objectToAttachLabel = model.getObjectByName('Palm1L');
			if (objectToAttachLabel) {
				updateTagPosition(objectToAttachLabel, tag); // 更新标签位置
		}
			renderer.render(scene, camera);
});
    // 更新标签位置函数
	function updateTagPosition(object, tag) {
		const position = new THREE.Vector3();
		object.getWorldPosition(position);
		tag.position.copy(position);
	}