要实现机器人3D位置的显示，你需要使用ROS2和Vue3结合开发。

首先，在Vue3中创建一个3D场景，你可以使用Three.js库来创建。Three.js是一个用于创建和渲染3D图形的JavaScript库，可以轻松创建3D场景、3D对象、光线等。

接下来，在Vue3中使用ROS2提供的roslibjs库，订阅机器人的位置信息，并将其转换为Three.js场景中的3D对象。

具体实现步骤如下：

1. 引入Three.js库和roslibjs库。

import * as THREE from 'three'; 
import ROSLIB from 'roslib';

2. 创建Three.js场景和摄像机。

// 创建Three.js场景 
const scene = new THREE.Scene(); 
// 创建Three.js摄像机 
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 
camera.position.z = 5;

3. 创建Three.js渲染器并将其添加到DOM中。

// 创建Three.js渲染器 
const renderer = new THREE.WebGLRenderer({ antialias: true }); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement);

4. 创建机器人3D模型。

// 创建机器人3D模型 
const robotGeometry = new THREE.BoxGeometry(1, 1, 1); 
const robotMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
const robotMesh = new THREE.Mesh(robotGeometry, robotMaterial); 
scene.add(robotMesh);

5. 订阅机器人位置信息并将其转换为Three.js中的3D对象。

// 创建ROS2连接 
const ros = new ROSLIB.Ros({ url: 'ws://localhost:9090', }); 
// 订阅机器人位置信息 
const robotPositionSubscriber = new ROSLIB.Topic({ ros, name: '/robot/position', messageType: 'geometry_msgs/Point', }); 
// 将机器人位置信息转换为Three.js中的3D对象 
robotPositionSubscriber.subscribe((message) => { robotMesh.position.x = message.x;     robotMesh.position.y = message.y; robotMesh.position.z = message.z; 
});

以上是一个简单的示例，实际应用中还需要考虑机器人姿态、机器人与环境的交互等因素。