🤖 Adds 3D model view
This commit is contained in:
@@ -0,0 +1,310 @@
|
||||
<?xml version="1.0"?>
|
||||
<robot xmlns:xacro="http://www.ros.org/wiki/xacro" name="spot_micro_rviz">
|
||||
|
||||
<material name="white">
|
||||
<color rgba="1 1 1 1"/>
|
||||
</material>
|
||||
<material name="black">
|
||||
<color rgba="0.1 0.1 0.1 1"/>
|
||||
</material>
|
||||
<material name="blue">
|
||||
<color rgba="0 0.75 1 1"/>
|
||||
</material>
|
||||
|
||||
<!-- Params -->
|
||||
|
||||
<xacro:property name="body_length" value="0.140" />
|
||||
<xacro:property name="body_width" value="0.110" />
|
||||
<xacro:property name="body_height" value="0.070" />
|
||||
|
||||
<xacro:property name="front_length" value="0.058" />
|
||||
<xacro:property name="rear_length" value="0.040" />
|
||||
|
||||
<xacro:property name="shoulder_length" value="0.044" />
|
||||
<xacro:property name="shoulder_width" value="0.038" />
|
||||
|
||||
<xacro:property name="leg_length" value="0.1075" />
|
||||
<xacro:property name="foot_length" value="0.130" />
|
||||
|
||||
<xacro:property name="toe_radius" value="0.020" />
|
||||
<!-- <xacro:property name="toe_radius" value="0.014" /> -->
|
||||
<xacro:property name="toe_width" value="0.020" />
|
||||
<xacro:property name="shift" value="0.055" />
|
||||
<xacro:property name="shiftx" value="0.093" />
|
||||
<xacro:property name="shifty" value="0.039" />
|
||||
|
||||
<!-- Macros -->
|
||||
|
||||
<xacro:macro name="gen_shoulder" params="name left">
|
||||
<link name="${name}">
|
||||
<visual>
|
||||
<xacro:if value="${left}">
|
||||
<geometry>
|
||||
<mesh filename="package://stl/lshoulder.stl" scale="0.001 0.001 0.001"/>
|
||||
</geometry>
|
||||
<origin rpy="0 0 3.14159" xyz="0.135 0.015 -0.01"/>
|
||||
</xacro:if>
|
||||
<xacro:unless value="${left}">
|
||||
<geometry>
|
||||
<mesh filename="package://stl/rshoulder.stl" scale="0.001 0.001 0.001"/>
|
||||
</geometry>
|
||||
<origin rpy="0 0 3.14159" xyz="0.135 0.095 -0.01"/>
|
||||
</xacro:unless>
|
||||
<material name="black"/>
|
||||
</visual>
|
||||
<collision>
|
||||
<geometry>
|
||||
<box size="${shoulder_length} ${shoulder_width} ${body_height}"/>
|
||||
</geometry>
|
||||
<origin rpy="0 0 0" xyz="0 0 0"/>
|
||||
</collision>
|
||||
<inertial>
|
||||
<mass value="0.10"/>
|
||||
<inertia ixx="100" ixy="0" ixz="0" iyy="100" iyz="0" izz="100" />
|
||||
</inertial>
|
||||
</link>
|
||||
</xacro:macro>
|
||||
|
||||
<xacro:macro name="gen_shoulder_joint" params="pos shiftx shifty">
|
||||
<joint name="${pos}_shoulder" type="revolute">
|
||||
<parent link="base_link"/>
|
||||
<child link="${pos}_shoulder_link"/>
|
||||
<axis xyz="1 0 0"/>
|
||||
<origin rpy="0 0 0" xyz="${shiftx} ${shifty} 0"/>
|
||||
<limit effort="1000.0" lower="-0.548" upper="0.548" velocity="0.7"/>
|
||||
<dynamics damping="0.0" friction="0.5"/>
|
||||
</joint>
|
||||
</xacro:macro>
|
||||
|
||||
<xacro:macro name="gen_leg" params="name left">
|
||||
<link name="${name}_cover">
|
||||
<visual>
|
||||
<xacro:if value="${left}">
|
||||
<geometry>
|
||||
<mesh filename="package://stl/larm_cover.stl" scale="0.001 0.001 0.001"/>
|
||||
</geometry>
|
||||
<origin rpy="0 -0.139 3.14159" xyz="0.130 -0.040 -0.025"/>
|
||||
</xacro:if>
|
||||
<xacro:unless value="${left}">
|
||||
<geometry>
|
||||
<mesh filename="package://stl/rarm_cover.stl" scale="0.001 0.001 0.001"/>
|
||||
</geometry>
|
||||
<origin rpy="0 -0.139 3.14159" xyz="0.130 0.15 -0.025"/>
|
||||
</xacro:unless>
|
||||
<material name="white"/>
|
||||
</visual>
|
||||
</link>
|
||||
<link name="${name}">
|
||||
<visual>
|
||||
<xacro:if value="${left}">
|
||||
<geometry>
|
||||
<mesh filename="package://stl/larm.stl" scale="0.001 0.001 0.001"/>
|
||||
</geometry>
|
||||
<origin rpy="0 -0.139 3.14159" xyz="0.130 -0.040 -0.025"/>
|
||||
</xacro:if>
|
||||
<xacro:unless value="${left}">
|
||||
<geometry>
|
||||
<mesh filename="package://stl/rarm.stl" scale="0.001 0.001 0.001"/>
|
||||
</geometry>
|
||||
<origin rpy="0 -0.139 3.14159" xyz="0.130 0.15 -0.025"/>
|
||||
</xacro:unless>
|
||||
<material name="black"/>
|
||||
<!-- <geometry>
|
||||
<box size="0.028 0.036 ${leg_length}"/>
|
||||
</geometry>
|
||||
<origin rpy="0.0 0.0 0.0" xyz="0.0 0.0 -0.050"/>
|
||||
<material name="white"/>-->
|
||||
</visual>
|
||||
<collision>
|
||||
<origin rpy="0.0 0.0 0.0" xyz="0.0 0.0 -0.050"/>
|
||||
<geometry>
|
||||
<box size="0.028 0.036 ${leg_length}"/>
|
||||
</geometry>
|
||||
</collision>
|
||||
<inertial>
|
||||
<mass value="0.15"/>
|
||||
<inertia ixx="1000" ixy="0" ixz="0" iyy="1000" iyz="0" izz="1000" />
|
||||
</inertial>
|
||||
</link>
|
||||
</xacro:macro>
|
||||
|
||||
<xacro:macro name="gen_leg_joint" params="pos shift">
|
||||
<joint name="${pos}_leg" type="revolute">
|
||||
<parent link="${pos}_shoulder_link"/>
|
||||
<child link="${pos}_leg_link"/>
|
||||
<axis xyz="0 1 0"/>
|
||||
<origin rpy="0 0 0" xyz="0 ${shift} 0"/>
|
||||
<limit effort="1000.0" lower="-2.666" upper="1.548" velocity="0.5"/>
|
||||
<dynamics damping="0.0" friction="0.0"/>
|
||||
</joint>
|
||||
|
||||
<joint name="${pos}_leg_cover_joint" type="fixed">
|
||||
<parent link="${pos}_leg_link"/>
|
||||
<child link="${pos}_leg_link_cover"/>
|
||||
<origin xyz="0 0 0"/>
|
||||
</joint>
|
||||
</xacro:macro>
|
||||
|
||||
<xacro:macro name="gen_foot" params="name left">
|
||||
<link name="${name}">
|
||||
<visual>
|
||||
<xacro:if value="${left}">
|
||||
<geometry>
|
||||
<mesh filename="package://stl/lfoot.stl" scale="0.001 0.001 0.001"/>
|
||||
</geometry>
|
||||
<origin rpy="0 0 3.14159" xyz="0.120 -0.04 0.1"/>
|
||||
</xacro:if>
|
||||
<xacro:unless value="${left}">
|
||||
<geometry>
|
||||
<mesh filename="package://stl/rfoot.stl" scale="0.001 0.001 0.001"/>
|
||||
</geometry>
|
||||
<origin rpy="0 0 3.14159" xyz="0.120 0.15 0.1"/>
|
||||
</xacro:unless>
|
||||
<material name="black"/>
|
||||
</visual>
|
||||
<collision>
|
||||
<geometry>
|
||||
<box size="0.026 0.020 ${foot_length}"/>
|
||||
</geometry>
|
||||
<origin rpy="0.0 0.0 0.0" xyz="0.0 0.0 -0.050"/>
|
||||
</collision>
|
||||
<inertial>
|
||||
<mass value="0.1"/>
|
||||
<inertia ixx="1000" ixy="0" ixz="0" iyy="1000" iyz="0" izz="1000" />
|
||||
</inertial>
|
||||
</link>
|
||||
</xacro:macro>
|
||||
|
||||
<xacro:macro name="gen_foot_joint" params="pos">
|
||||
<joint name="${pos}_foot" type="revolute">
|
||||
<parent link="${pos}_leg_link"/>
|
||||
<child link="${pos}_foot_link"/>
|
||||
<axis xyz="0 1 0"/>
|
||||
<origin rpy="0 0 0" xyz="0 0 -${leg_length}"/>
|
||||
<limit effort="1000.0" lower="-2.6" upper="0.1" velocity="0.5"/>
|
||||
<dynamics damping="0.0" friction="0.5"/>
|
||||
</joint>
|
||||
</xacro:macro>
|
||||
|
||||
<xacro:macro name="gen_toe" params="name">
|
||||
<link name="${name}">
|
||||
<visual>
|
||||
<geometry>
|
||||
<mesh filename="package://stl/foot.stl" scale="0.001 0.001 0.001"/>
|
||||
</geometry>
|
||||
<origin rpy="0 -0.40010 3.14159" xyz="0.00 0.01 0.015"/>
|
||||
<material name="blue"/>
|
||||
</visual>
|
||||
<collision>
|
||||
<geometry>
|
||||
<sphere radius="${toe_radius}" />
|
||||
</geometry>
|
||||
<origin rpy="0 0 0" xyz="0 0 ${toe_radius}"/>
|
||||
<contact_coefficients mu="1.1" />
|
||||
</collision>
|
||||
<inertial>
|
||||
<mass value="0.05"/>
|
||||
<inertia ixx="1000" ixy="0" ixz="0" iyy="1000" iyz="0" izz="1000" />
|
||||
</inertial>
|
||||
</link>
|
||||
</xacro:macro>
|
||||
|
||||
<xacro:macro name="gen_toe_joint" params="pos">
|
||||
<joint name="${pos}_toe" type="fixed">
|
||||
<parent link="${pos}_foot_link"/>
|
||||
<child link="${pos}_toe_link"/>
|
||||
<origin xyz="0 0 -${foot_length}"/>
|
||||
</joint>
|
||||
</xacro:macro>
|
||||
|
||||
<xacro:macro name="gen_full_leg_joint" params="pos shiftx shifty shift left">
|
||||
<xacro:gen_shoulder name="${pos}_shoulder_link" left="${left}"/>
|
||||
<xacro:gen_leg name="${pos}_leg_link" left="${left}"/>
|
||||
<xacro:gen_foot name="${pos}_foot_link" left="${left}"/>
|
||||
<xacro:gen_toe name="${pos}_toe_link"/>
|
||||
|
||||
<xacro:gen_shoulder_joint pos="${pos}" shiftx="${shiftx}" shifty="${shifty}"/>
|
||||
<xacro:gen_leg_joint pos="${pos}" shift="${shift}"/>
|
||||
<xacro:gen_foot_joint pos="${pos}"/>
|
||||
<xacro:gen_toe_joint pos="${pos}"/>
|
||||
</xacro:macro>
|
||||
|
||||
<!-- Robot Body -->
|
||||
|
||||
<link name="base_link">
|
||||
<visual>
|
||||
<geometry>
|
||||
<mesh filename="package://stl/mainbody.stl" scale="0.001 0.001 0.001"/>
|
||||
</geometry>
|
||||
<material name="black"/>
|
||||
<origin rpy="0 0 0" xyz="-0.042 -0.055 -0.010"/>
|
||||
</visual>
|
||||
<collision>
|
||||
<geometry>
|
||||
<box size="${body_length} ${body_width} ${body_height}"/>
|
||||
</geometry>
|
||||
<origin rpy="0 0 0" xyz="0 0 0"/>
|
||||
</collision>
|
||||
<inertial>
|
||||
<mass value="2.80"/>
|
||||
<inertia ixx="100" ixy="0" ixz="0" iyy="100" iyz="0" izz="100" />
|
||||
</inertial>
|
||||
</link>
|
||||
|
||||
|
||||
<link name="rear_link">
|
||||
<visual>
|
||||
<geometry>
|
||||
<mesh filename="package://stl/backpart.stl" scale="0.001 0.001 0.001"/>
|
||||
</geometry>
|
||||
<origin rpy="0 0 3.14159" xyz="0.04 0.055 -0.010"/>
|
||||
<material name="white"/>
|
||||
</visual>
|
||||
<collision>
|
||||
<geometry>
|
||||
<box size="${rear_length} ${body_width} ${body_height}"/>
|
||||
</geometry>
|
||||
<origin rpy="0 0 0" xyz="0.135 0 0"/>
|
||||
</collision>
|
||||
<inertial>
|
||||
<mass value="0.20"/>
|
||||
<inertia ixx="100" ixy="0" ixz="0" iyy="100" iyz="0" izz="100" />
|
||||
</inertial>
|
||||
</link>
|
||||
<joint name="base_rear" type="fixed">
|
||||
<parent link="base_link"/>
|
||||
<child link="rear_link"/>
|
||||
</joint>
|
||||
|
||||
<link name="front_link">
|
||||
<visual>
|
||||
<geometry>
|
||||
<mesh filename="package://stl/frontpart.stl" scale="0.001 0.001 0.001"/>
|
||||
</geometry>
|
||||
<origin rpy="0 0 3.14159" xyz="0.040 0.055 -0.010"/>
|
||||
<material name="white"/>
|
||||
</visual>
|
||||
<collision>
|
||||
<geometry>
|
||||
<box size="${front_length} ${body_width} ${body_height}"/>
|
||||
</geometry>
|
||||
<origin rpy="0 0 0" xyz="-0.145 0 0"/>
|
||||
</collision>
|
||||
<inertial>
|
||||
<mass value="0.20"/>
|
||||
<inertia ixx="100" ixy="0" ixz="0" iyy="100" iyz="0" izz="100" />
|
||||
</inertial>
|
||||
</link>
|
||||
<joint name="base_front" type="fixed">
|
||||
<parent link="base_link"/>
|
||||
<child link="front_link"/>
|
||||
</joint>
|
||||
|
||||
<!-- create Legs -->
|
||||
|
||||
<xacro:gen_full_leg_joint pos="front_left" shiftx="${shiftx}" shifty="${shifty}" shift="${shift}" left="true"/>
|
||||
<xacro:gen_full_leg_joint pos="front_right" shiftx="${shiftx}" shifty="-${shifty}" shift="-${shift}" left="false"/>
|
||||
<xacro:gen_full_leg_joint pos="rear_left" shiftx="-${shiftx}" shifty="${shifty}" shift="${shift}" left="true"/>
|
||||
<xacro:gen_full_leg_joint pos="rear_right" shiftx="-${shiftx}" shifty="-${shifty}" shift="-${shift}" left="false"/>
|
||||
|
||||
</robot>
|
||||
Binary file not shown.
+11
-1
@@ -12,13 +12,23 @@
|
||||
export let url = window.location.pathname;
|
||||
onMount(() => {
|
||||
connect(`ws://${location}`);
|
||||
registerFetchIntercept()
|
||||
});
|
||||
|
||||
const registerFetchIntercept = () => {
|
||||
const { fetch: originalFetch } = window;
|
||||
window.fetch = async (...args) => {
|
||||
const cache = await caches.open("files")
|
||||
const [resource, config] = args;
|
||||
return await cache.match(resource) ?? originalFetch(resource, config)
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<Router {url}>
|
||||
<TopBar />
|
||||
<Sidebar />
|
||||
<div class="absolute w-full h-full">
|
||||
<div class="absolute w-full h-full bg-background text-on-background">
|
||||
<Route path="/" component={Controller} />
|
||||
<Route path="/config" component={Config} />
|
||||
<Route path="/health" component={Health} />
|
||||
|
||||
@@ -0,0 +1,136 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import {
|
||||
WebGLRenderer,
|
||||
PerspectiveCamera,
|
||||
Scene,
|
||||
Mesh,
|
||||
PlaneGeometry,
|
||||
ShadowMaterial,
|
||||
DirectionalLight,
|
||||
PCFSoftShadowMap,
|
||||
sRGBEncoding,
|
||||
AmbientLight,
|
||||
MathUtils,
|
||||
LoaderUtils
|
||||
} from 'three';
|
||||
import { XacroLoader } from 'xacro-parser';
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
|
||||
import URDFLoader from 'urdf-loader';
|
||||
import { servoBuffer } from '../../lib/socket'
|
||||
import { lerp } from '../../lib/utils';
|
||||
import uzip from 'uzip';
|
||||
import { outControllerData } from '../../lib/store';
|
||||
import { solve } from '../../lib/kinematics';
|
||||
|
||||
let el: HTMLCanvasElement;
|
||||
let scene, camera, renderer, robot, controls;
|
||||
let angles = new Int8Array(12)
|
||||
|
||||
const servoNames = [
|
||||
"front_left_shoulder", "front_left_leg", "front_left_foot",
|
||||
"front_right_shoulder", "front_right_leg", "front_right_foot",
|
||||
"rear_left_shoulder", "rear_left_leg", "rear_left_foot",
|
||||
"rear_right_shoulder", "rear_right_leg", "rear_right_foot"]
|
||||
|
||||
onMount(async () => {
|
||||
await cacheModelFiles()
|
||||
createScene()
|
||||
});
|
||||
|
||||
const cacheModelFiles = async () => {
|
||||
const cacheKey = "files"
|
||||
const cache = await caches.open(cacheKey)
|
||||
|
||||
let data = await fetch("/stl.zip").then(data => data.arrayBuffer())
|
||||
|
||||
var files = uzip.parse(data);
|
||||
|
||||
for(const [path, data] of Object.entries(files) as [path:string, data:Uint8Array][]){
|
||||
const url = new URL(path, window.location.href)
|
||||
cache.put(url, new Response(data));
|
||||
}
|
||||
}
|
||||
|
||||
const loadModel = () => {
|
||||
const url = '/spot_micro.urdf.xacro';
|
||||
const xacroLoader = new XacroLoader();
|
||||
xacroLoader.load( url, xml => {
|
||||
const urdfLoader = new URDFLoader();
|
||||
urdfLoader.workingPath = LoaderUtils.extractUrlBase( url );
|
||||
|
||||
robot = urdfLoader.parse( xml );
|
||||
robot.rotation.x = Math.PI / 0.6666;
|
||||
robot.rotation.z = Math.PI / 2;
|
||||
robot.traverse(c => c.castShadow = true);
|
||||
robot.updateMatrixWorld(true);
|
||||
|
||||
scene.add( robot );
|
||||
|
||||
}, (error) => console.log(error));
|
||||
}
|
||||
|
||||
const createScene = () => {
|
||||
scene = new Scene();
|
||||
camera = new PerspectiveCamera();
|
||||
camera.position.set(-0.5, 0.5, 1);
|
||||
|
||||
renderer = new WebGLRenderer({ antialias: true, canvas: el });
|
||||
renderer.outputEncoding = sRGBEncoding;
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = PCFSoftShadowMap;
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
const directionalLight = new DirectionalLight(0xffffff, 1.0);
|
||||
directionalLight.castShadow = true;
|
||||
directionalLight.shadow.mapSize.setScalar(1024);
|
||||
directionalLight.position.set(5, 30, 5);
|
||||
scene.add(directionalLight);
|
||||
|
||||
const ambientLight = new AmbientLight(0xffffff, 0.2);
|
||||
scene.add(ambientLight);
|
||||
|
||||
const ground = new Mesh(new PlaneGeometry(), new ShadowMaterial({ opacity: 0.25 }));
|
||||
ground.rotation.x = -Math.PI / 2;
|
||||
ground.scale.setScalar(30);
|
||||
ground.receiveShadow = true;
|
||||
scene.add(ground);
|
||||
|
||||
controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.minDistance = 0;
|
||||
controls.maxDistance = 4;
|
||||
controls.update();
|
||||
|
||||
loadModel()
|
||||
handleResize()
|
||||
render()
|
||||
}
|
||||
|
||||
|
||||
const handleResize = () => {
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
}
|
||||
|
||||
const render = () => {
|
||||
requestAnimationFrame(render);
|
||||
renderer.render(scene, camera);
|
||||
|
||||
if(!robot) return
|
||||
|
||||
const newAngles = $servoBuffer
|
||||
if(JSON.stringify(angles) === JSON.stringify(newAngles)) return
|
||||
|
||||
for (let i = 0; i < servoNames.length; i++) {
|
||||
angles[i] = lerp(robot.joints[servoNames[i]].angle * (180/Math.PI), newAngles[i], 0.2)
|
||||
robot.joints[servoNames[i]].setJointValue(MathUtils.degToRad(angles[i]));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:resize={handleResize}></svelte:window>
|
||||
|
||||
<canvas bind:this={el} class="absolute"></canvas>
|
||||
@@ -4,7 +4,11 @@ export type WebSocketStatus = 'OPEN' | 'CONNECTING' | 'CLOSED'
|
||||
|
||||
export const isConnected = writable(false)
|
||||
|
||||
export const data = writable(new Float32Array(13))
|
||||
export const dataBuffer = writable(new Float32Array(13))
|
||||
|
||||
export const servoBuffer = writable(new Int8Array(12))
|
||||
|
||||
export const data = writable();
|
||||
|
||||
export const status:Writable<WebSocketStatus> = writable('CLOSED')
|
||||
|
||||
@@ -32,7 +36,7 @@ const _disconnected = () => {
|
||||
|
||||
const _message = (event) => {
|
||||
if (event.data instanceof ArrayBuffer) {
|
||||
let buffer = new Uint8Array(event.data);
|
||||
data.set(new Float32Array(buffer.buffer));
|
||||
}
|
||||
let buffer = new Int8Array(event.data);
|
||||
servoBuffer.set(buffer);
|
||||
} else dataBuffer.set(JSON.parse(event.data));
|
||||
}
|
||||
@@ -1,4 +1,8 @@
|
||||
export const humanFileSize = (size:number):string => {
|
||||
var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
|
||||
return Number((size / Math.pow(1024, i)).toFixed(2)) * 1 + ['B', 'kB', 'MB', 'GB', 'TB'][i];
|
||||
}
|
||||
}
|
||||
|
||||
export const lerp = (start: number, end: number, amt: number) => {
|
||||
return (1 - amt) * start + amt * end;
|
||||
};
|
||||
@@ -1,9 +1,11 @@
|
||||
<script lang="ts">
|
||||
import Stream from '../components/Views/Stream.svelte';
|
||||
import Controls from '../components/Controls.svelte';
|
||||
import ModelView from '../components/Model/ModelView.svelte';
|
||||
</script>
|
||||
|
||||
<div class="flex justify-center items-center w-full h-full">
|
||||
<Stream />
|
||||
<ModelView />
|
||||
<Controls />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user