01
ソフトウェア概要Software Overview
本ソフトウェアは、製造現場で使用される主要な工業用ロボット10種類を、 HTML5 Canvas と純粋な JavaScript のみで実装した 3D シミュレーターです。 外部ライブラリ・プラグインを一切使用せず、Webブラウザ単体で動作します。 教育・研究・製品紹介・トレーニング用途に最適です。
目的
工業用ロボットの種類・構造・動作原理を視覚的・直感的に理解できるようにします。ロボット工学の入門教育や設備選定の参考資料として活用できます。
動作環境
モダンWebブラウザ（Chrome・Firefox・Safari・Edge）であればインストール不要で即時起動。外部ネットワーク接続は不要です（フォント読込を除く）。
技術構成
HTML5 + CSS3 + Vanilla JavaScript のみで構成。Canvas 2D API による独自の 3D 投影エンジンを実装しており、外部ライブラリへの依存がゼロです。
3D描画方式
透視投影法（Perspective Projection）を独自実装。カメラのヨー・ピッチ角とズーム距離を制御し、任意の視点からロボットを観察できます。
シングルファイル構成：
本ソフトウェアは HTML ファイル 1 つのみで完結します。ファイルをブラウザで開くだけで即座に起動し、サーバーやビルド環境は不要です。
02
収録ロボット一覧10 Robot Models
| TYPE | ロボット名 | DOF | 可搬質量 | 主な用途 |
|---|---|---|---|---|
| TYPE-01 | 6軸多関節ロボット Articulated Arm |
6 DOF | 20 kg | 自動車組立・溶接・塗装 |
| TYPE-02 | SCARAロボット Selective Compliance Arm |
4 DOF | 5 kg | 電子部品実装・精密組立 |
| TYPE-03 | デルタロボット Parallel Delta Robot |
3 DOF | 1 kg | 食品・薬品の高速仕分け |
| TYPE-04 | 直交座標型ロボット Cartesian / Gantry |
3 DOF | 500 kg | 大型精密加工・重量搬送 |
| TYPE-05 | 溶接ロボット Arc Welding Robot |
6 DOF | 15 kg | アーク溶接・スポット溶接 |
| TYPE-06 | 協働ロボット (Cobot) Collaborative Robot |
6 DOF | 10 kg | 人間との共同作業・検査 |
| TYPE-07 | 双腕ロボット Dual-Arm Robot |
14 DOF | 3 kg×2 | 複雑組立・精密ハンドリング |
| TYPE-08 | 塗装ロボット Painting / Spray Robot |
6 DOF | 8 kg | 自動車・家電の自動塗装 |
| TYPE-09 | ヘキサポッド Stewart Platform / Hexapod |
6 DOF | 100 kg | 超精密位置決め・シミュレーター |
| TYPE-10 | AGV搭載腕型ロボット Mobile Arm Robot |
7 DOF | 12 kg | 工場内自律搬送・組立 |
03
主要機能Key Features
リアルタイム 3D アニメーション
各ロボットの関節・軸が独自の動作パターンで連続アニメーション。実際の工場動作を模したモーションを再現します。
自由視点カメラ
マウスドラッグで360°回転、スクロールでズームイン/アウト。あらゆる角度からロボットの構造を観察できます。
関節角度リアルタイム表示
各関節の現在角度をバーグラフで表示。動作中の変化をリアルタイムで確認でき、動力学の学習に役立ちます。
エンドエフェクター位置追跡
ツール先端（エンドエフェクター）の X / Y / Z 座標をリアルタイムで数値表示。空間的な動作範囲を把握できます。
再生速度コントロール
0.2倍〜3.0倍の速度調整スライダー搭載。スロー再生で細かい動きを分析したり、高速で全体動作を把握できます。
専用エフェクト表現
溶接ロボットの火花飛散・塗装ロボットのスプレー粒子・協働ロボットの安全光輪など、各ロボット固有のビジュアルエフェクトを実装。
04
操作方法Controls & Interface
マウスドラッグ
3Dカメラ回転
Canvas上でドラッグすることでカメラのヨー（左右）・ピッチ（上下）を制御します。任意の角度からロボットを観察できます。
スクロール
ズームイン / アウト
マウスホイールでカメラ距離を調整します。細部の確認から全体把握まで自由にスケール変更できます（180〜950の範囲）。
左パネル選択
ロボット切り替え
左サイドバーのボタンをクリックすると対応するロボットに即時切り替わります。アニメーションはリセットされ、仕様情報も更新されます。
▶ 再生 / 停止
アニメーション制御
右パネルの再生ボタンでアニメーションの一時停止・再開を切り替えます。特定の姿勢で停止させて細部を観察するのに便利です。
↺ リセット
アニメーションリセット
タイムカウンターを 0 に戻し、ロボットを初期姿勢から再スタートします。動作パターンの最初から確認したいときに使用します。
SPEED スライダー
再生速度調整（0.2x〜3.0x）
アニメーション速度をリアルタイムに変更します。スロー再生（0.2x）で関節の微細な動きを分析、高速（3.0x）で全体の動作パターンを素早く把握できます。
タッチ操作
モバイル・タブレット対応
タッチドラッグでカメラ回転に対応。スマートフォンやタブレットでも快適に操作できます。
05
推奨使用フローRecommended Usage Flow
1
🚀 ファイルを開く
HTMLファイルをブラウザで開きます。インストール・サーバー・ネットワーク接続は不要です。シミュレーターが即座に起動し、TYPE-01（6軸多関節）が自動再生されます。
2
🤖 ロボットを選択する
左サイドバーから興味のあるロボットタイプを選択します。右パネルに仕様（DOF・可搬質量・リーチ・繰返精度・用途）が表示されます。
3
🎥 視点を調整する
ドラッグで視点を回転させてロボットの構造を多角的に観察します。スクロールでズームイン/アウトし、関節部分や先端ツールを詳しく確認できます。
4
📊 動作データを読む
右パネルの「関節/軸 状態」でリアルタイムの関節角度変化を確認します。「エフェクター位置」でツール先端の軌跡を数値で追跡します。
5
⚙️ 速度を調整して詳細分析
SPEED スライダーを 0.2x のスロー再生に設定し、各関節の動きを詳細に分析します。気になった姿勢では一時停止ボタンで静止させて確認できます。
6
🔁 他のロボットと比較する
他のロボットタイプに切り替えて、構造・動作・仕様の違いを比較します。10種類を比較することで、各ロボットの特性・得意分野・用途の違いを体系的に理解できます。
06
技術仕様Technical Specifications
TECHNICAL SPECIFICATIONS — ROBOT_SIMULATOR_v3.0.html
ファイル構成
HTML単一ファイル（1ファイル完結）
外部依存
Webフォントのみ（ロジック依存ゼロ）
描画API
HTML5 Canvas 2D API
3D投影方式
透視投影法（独自実装）
アニメーション
requestAnimationFrame（最大 60 fps）
レンダリング
シリアル描画（Z深度順・フォグなし）
対応ブラウザ
Chrome / Firefox / Safari / Edge（最新版）
タッチ対応
シングルタッチ（ドラッグ操作）
収録ロボット数
10 種類（TYPE-01〜TYPE-10）
最大 DOF
14 DOF（双腕ロボット）
フォント
Orbitron / Share Tech Mono（Google Fonts）
レスポンシブ
Canvas リサイズ対応（ウィンドウ追従）
カスタマイズについて：
ソースコードの
robots 配列を編集することで、各ロボットの仕様値（DOF・可搬質量・用途など）を変更できます。
また drawFns に新しい描画関数を追加することで、ロボット種類を容易に拡張できます。