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);
}