237 lines
6.7 KiB
Vue
237 lines
6.7 KiB
Vue
|
<template>
|
|||
|
|
<div class="elfin-viewer">
|
|||
|
|
<div ref="viewerContainer" class="viewer-container">
|
|||
|
|
<!-- Three.js 渲染 -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted, onBeforeUnmount, nextTick, reactive } from 'vue';
|
|||
|
|
import * as THREE from 'three';
|
|||
|
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
|
|||
|
|
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
|
|||
|
|
|
|||
|
|
import { XacroAdapter } from '@/adapters/XacroAdapter.js'
|
|||
|
|
|
|||
|
|
const viewerContainer = ref(null);
|
|||
|
|
|
|||
|
|
let scene, camera, renderer, controls;
|
|||
|
|
|
|||
|
|
const animationId = ref(null);
|
|||
|
|
const jointControls = reactive([]);
|
|||
|
|
|
|||
|
|
// ============ 场景初始化 ============
|
|||
|
|
const initScene = () => {
|
|||
|
|
const container = viewerContainer.value;
|
|||
|
|
const width = container.clientWidth || 800;
|
|||
|
|
const height = container.clientHeight || 600;
|
|||
|
|
scene = new THREE.Scene();
|
|||
|
|
scene.background = new THREE.Color('#060a12');
|
|||
|
|
camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
|
|||
|
|
camera.position.set(2, 2, 3);
|
|||
|
|
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
|||
|
|
renderer.setSize(width, height);
|
|||
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
|||
|
|
renderer.shadowMap.enabled = true;
|
|||
|
|
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
|||
|
|
renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
|||
|
|
renderer.toneMappingExposure = 1.2;
|
|||
|
|
container.appendChild(renderer.domElement);
|
|||
|
|
controls = new OrbitControls(camera, renderer.domElement);
|
|||
|
|
controls.enableDamping = true;
|
|||
|
|
controls.dampingFactor = 0.1;
|
|||
|
|
controls.target.set(0, 0.5, 0);
|
|||
|
|
controls.update();
|
|||
|
|
|
|||
|
|
const ambient = new THREE.AmbientLight(0x404060, 0.6);
|
|||
|
|
scene.add(ambient);
|
|||
|
|
const main = new THREE.DirectionalLight(0xffffff, 1.0);
|
|||
|
|
main.position.set(5, 10, 7);
|
|||
|
|
main.castShadow = true;
|
|||
|
|
scene.add(main);
|
|||
|
|
const fill = new THREE.DirectionalLight(0x8888ff, 0.4);
|
|||
|
|
fill.position.set(-5, 0, 5);
|
|||
|
|
scene.add(fill);
|
|||
|
|
const rim = new THREE.DirectionalLight(0xffffff, 0.3);
|
|||
|
|
rim.position.set(0, -5, 5);
|
|||
|
|
scene.add(rim);
|
|||
|
|
// const grid = new THREE.GridHelper(3, 20, 0x444466, 0x333355);
|
|||
|
|
// grid.position.y = -0.5;
|
|||
|
|
// scene.add(grid);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
// ============ 关节控制（无需修改） ============
|
|||
|
|
const updateJoint = (jointName, angle) => {
|
|||
|
|
if (!robotInstance) return;
|
|||
|
|
|
|||
|
|
const joint = robotInstance.joints[jointName];
|
|||
|
|
|
|||
|
|
if (!joint) {
|
|||
|
|
console.warn(`未找到关节: ${jointName}`);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ✅ 使用 setJointValue 触发变换矩阵更新
|
|||
|
|
if (joint._jointType === 'revolute' || joint._jointType === 'continuous') {
|
|||
|
|
joint.setJointValue(angle);
|
|||
|
|
} else if (joint._jointType === 'prismatic') {
|
|||
|
|
joint.setJointValue(angle);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 同步滑块显示值
|
|||
|
|
const control = jointControls.find(c => c.name === jointName);
|
|||
|
|
if (control) control.value = angle;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const resetJoints = () => {
|
|||
|
|
for (const joint of jointControls) {
|
|||
|
|
joint.value = 0;
|
|||
|
|
updateJoint(joint.name, 0);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const fileMap = new Map()
|
|||
|
|
const loadFiles = async () => {
|
|||
|
|
const fileNames = [
|
|||
|
|
'elfin10.urdf.xacro',
|
|||
|
|
'elfin10_gazebo.xacro',
|
|||
|
|
'elfin10_transmission.xacro',
|
|||
|
|
'meshes/elfin10/elfin_base.STL',
|
|||
|
|
'meshes/elfin10/elfin_end_link.STL',
|
|||
|
|
'meshes/elfin10/elfin_link1.STL',
|
|||
|
|
'meshes/elfin10/elfin_link2.STL',
|
|||
|
|
'meshes/elfin10/elfin_link3.STL',
|
|||
|
|
'meshes/elfin10/elfin_link4.STL',
|
|||
|
|
'meshes/elfin10/elfin_link5.STL',
|
|||
|
|
'meshes/elfin10/elfin_link6.STL'
|
|||
|
|
]
|
|||
|
|
const fetchPromises = fileNames.map(async (name) => {
|
|||
|
|
const url = `/inspection/elfin10/${name}`
|
|||
|
|
const response = await fetch(url)
|
|||
|
|
const blob = await response.blob()
|
|||
|
|
return new File([blob], name, { type: blob.type })
|
|||
|
|
})
|
|||
|
|
const fileList = await Promise.all(fetchPromises)
|
|||
|
|
fileList.forEach(item => {
|
|||
|
|
fileMap.set('elfin10/' + item.name, item);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const currentModel = ref()
|
|||
|
|
let robotInstance = null; // 保存 URDFRobot 对象
|
|||
|
|
|
|||
|
|
const loadRobot = async () => {
|
|||
|
|
const xacroUrl = `/inspection/elfin10/elfin10.urdf.xacro`;
|
|||
|
|
|
|||
|
|
const response = await fetch(xacroUrl);
|
|||
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
|||
|
|
const xacroContent = await response.text();
|
|||
|
|
const file = fileMap.get('elfin10/elfin10.urdf.xacro')
|
|||
|
|
const model = await XacroAdapter.parse(xacroContent, file.name, fileMap, file);
|
|||
|
|
|
|||
|
|
const robot = model.threeObject; // 这就是 URDFRobot
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 将机器人添加到场景
|
|||
|
|
scene.add(robot); // ⚠️ 注意：是 robot.scene，不是 robot
|
|||
|
|
robot.rotation.x = -Math.PI / 2;
|
|||
|
|
currentModel.value = model
|
|||
|
|
|
|||
|
|
robotInstance = robot;
|
|||
|
|
|
|||
|
|
// 获取关节条目数组
|
|||
|
|
let jointEntries = [];
|
|||
|
|
if (robot.joints instanceof Map) {
|
|||
|
|
jointEntries = [...robot.joints.entries()];
|
|||
|
|
} else if (typeof robot.joints === 'object' && robot.joints !== null) {
|
|||
|
|
jointEntries = Object.entries(robot.joints);
|
|||
|
|
} else if (Array.isArray(robot.joints)) {
|
|||
|
|
jointEntries = robot.joints.map((j, i) => [i, j]); // 索引作为名称
|
|||
|
|
} else {
|
|||
|
|
console.error('未知的 joints 结构:', robot.joints);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 填充关节控制列表
|
|||
|
|
for (const [name, joint] of jointEntries) {
|
|||
|
|
if (joint._jointType === 'fixed') continue;
|
|||
|
|
const limits = joint.limits || {};
|
|||
|
|
let lower = limits.lower !== undefined ? limits.lower : -Math.PI;
|
|||
|
|
let upper = limits.upper !== undefined ? limits.upper : Math.PI;
|
|||
|
|
// 如果是连续关节，范围设为 -PI ~ PI
|
|||
|
|
if (joint._jointType === 'continuous') {
|
|||
|
|
lower = -Math.PI;
|
|||
|
|
upper = Math.PI;
|
|||
|
|
}
|
|||
|
|
// 初始角度一般为 0
|
|||
|
|
jointControls.push({
|
|||
|
|
name,
|
|||
|
|
min: lower,
|
|||
|
|
max: upper,
|
|||
|
|
value: 0, // 因为 joint.angle 初始为 0
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ============ 动画循环 ============
|
|||
|
|
const animate = () => {
|
|||
|
|
animationId.value = requestAnimationFrame(animate);
|
|||
|
|
controls?.update();
|
|||
|
|
renderer?.render(scene, camera);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ============ 生命周期 ============
|
|||
|
|
onMounted(async () => {
|
|||
|
|
await nextTick();
|
|||
|
|
await loadFiles()
|
|||
|
|
initScene();
|
|||
|
|
await loadRobot();
|
|||
|
|
animate();
|
|||
|
|
window.addEventListener('resize', onResize);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
if (animationId.value) cancelAnimationFrame(animationId.value);
|
|||
|
|
window.removeEventListener('resize', onResize);
|
|||
|
|
renderer?.dispose();
|
|||
|
|
controls?.dispose();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const onResize = () => {
|
|||
|
|
const container = viewerContainer.value;
|
|||
|
|
if (!container || !camera || !renderer) return;
|
|||
|
|
const width = container.clientWidth;
|
|||
|
|
const height = container.clientHeight;
|
|||
|
|
camera.aspect = width / height;
|
|||
|
|
camera.updateProjectionMatrix();
|
|||
|
|
renderer.setSize(width, height);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
defineExpose({ updateJoint, resetJoints, jointControls });
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.elfin-viewer {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background: #0d0d1a;
|
|||
|
|
|
|||
|
|
.viewer-container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
canvas {
|
|||
|
|
display: block;
|
|||
|
|
width: 100% !important;
|
|||
|
|
height: 100% !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</style>
|