URDF Visualizer 项目启动与配置教程

1. 项目目录结构及介绍

URDF Visualizer 是一个用于在 Visual Studio Code (VSCode) 中可视化 URDF（统一机器人描述格式）和 Xacro 文件的开源项目。以下是项目的目录结构及各部分的简要介绍：

• src/：存放项目的主要源代码，包括 TypeScript 文件和相关的 CSS、HTML 文件。
• media/：包含项目所需的媒体文件，如图标、示例图片等。
• .vscode/：包含 Visual Studio Code 的项目配置文件。
• test/：存放项目的测试代码和测试相关文件。
• docs/：如果包含的话，存放项目的文档。
• dist/：构建输出目录，存放编译后的代码。
• package.json：定义了项目的依赖、脚本和配置。
• tsconfig.json：TypeScript 配置文件，定义了 TypeScript 编译器的选项。
• webpack.config.js：Webpack 配置文件，用于配置项目的模块打包。
• README.md：项目说明文件，包含了项目的介绍、安装和使用说明。

2. 项目的启动文件介绍

项目的启动主要是通过在 Visual Studio Code 中安装和配置 URDF Visualizer 扩展完成的。以下是启动项目的基本步骤：

1. 打开 Visual Studio Code。
2. 在扩展市场中搜索 "URDF Visualizer" 并安装。
3. 打开包含 URDF 或 Xacro 文件的文件夹。
4. 使用快捷键 Ctrl+Shift+P 打开命令面板，输入 "URDF Visualizer: Preview URDF/Xacro" 命令，或点击文件右上角的预览按钮。

启动文件主要是 .vscode/ 目录下的配置文件，它们用于设置 Visual Studio Code 的工作环境。

3. 项目的配置文件介绍

项目的配置文件主要影响 URDF Visualizer 扩展的行为和显示。以下是一些重要的配置项：

• urdf-visualizer.packages：设置 ROS/ROS2 包的根目录，用于解析 URDF/Xacro 文件中的 package://<package_name> 路径。
• urdf-visualizer.renderOnSave：设置文件保存时是否自动重新渲染。
• urdf-visualizer.reRenderWhenSwitchFile：设置在切换活动文件时是否自动重新渲染。
• urdf-visualizer.backgroundColor：设置背景颜色，需要使用以 # 开头的十六进制颜色代码。
• urdf-visualizer.showTips：切换操作提示的显示。

这些配置可以在项目的 .vscode/settings.json 文件中设置，例如：

{
  "urdf-visualizer.packages": {
    "fake_robot": "${workspaceFolder}/src/fake_robot"
  },
  "urdf-visualizer.renderOnSave": true,
  "urdf-visualizer.reRenderWhenSwitchFile": true,
  "urdf-visualizer.backgroundColor": "#000000",
  "urdf-visualizer.showTips": true
}

通过正确配置这些文件和设置，可以确保 URDF Visualizer 扩展在 Visual Studio Code 中正常运行。