"custom_HTML": "<!DOCTYPE html>\n<html lang=\"en\">\n<html>\n<head>\n <meta charset=\"utf-8\" />\n <title>Sandbox</title>\n <script type=\"importmap\">\n {\n \"imports\": {\n \"three\": \"https://cdn.jsdelivr.net/npm/
[email protected]/build/three.module.js\",\n \"three/examples/jsm/\": \"https://cdn.jsdelivr.net/npm/
[email protected]/examples/jsm/\"\n }\n }\n </script>\n <script type=\"text/javascript\" src=\"../MAVLink/mavlink.js\"></script>\n</head>\n<body>\n</body>\n<script type=\"module\">\n\n import {\n WebGLRenderer,\n PerspectiveCamera,\n Scene,\n DirectionalLight,\n Color,\n AmbientLight,\n LoadingManager,\n Quaternion,\n Euler\n } from 'three'\n import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'\n import URDFLoader from 'https://unpkg.com/
[email protected]/src/URDFLoader.js'\n\n let options\n\n // Overload fetch so we can supply files directly\n const { fetch: originalFetch } = window\n\n window.fetch = async (...args) => {\n let [resource, config ] = args\n\n // Find the target file\n let target\n if (typeof resource === 'object') {\n target = resource.url\n } else {\n target = resource\n }\n\n // Fetch from base64 url for give file\n let response\n if (target.endsWith(\".urdf\")) {\n response = await originalFetch(options.urdfFile[0].url)\n } else {\n for (const mesh of options.meshFiles) {\n if (target.endsWith(mesh.originalName)) {\n response = await originalFetch(mesh.url)\n break\n }\n }\n }\n\n if (response == null) {\n // If local file overload failed try normal fetch\n response = await originalFetch(resource, config)\n }\n\n return response\n }\n\n const div = document.createElement(\"div\")\n div.style.position = \"absolute\"\n div.style.top = 0\n div.style.left = 0\n div.style.bottom = 0\n div.style.right = 0\n div.style.margin = \"10px\"\n div.style.border = \"5px solid\"\n div.style.borderRadius = \"10px\"\n div.style.borderColor = \"#c8c8c8\"\n document.body.appendChild(div)\n\n const canvas = document.createElement(\"canvas\")\n canvas.style.display = \"block\"\n canvas.style.borderRadius = \"5px\"\n div.appendChild(canvas)\n\n let scene, camera, renderer, vehicle, controls\n let prop_rad_s = 0.0\n let last_render = Date.now()\n\n let base_rotation = new Quaternion().setFromEuler(new Euler(-90 * (Math.PI / 180), 0.0, 90 * (Math.PI / 180)))\n\n function init() {\n\n scene = new Scene()\n scene.background = new Color(0x87CEEB)\n\n camera = new PerspectiveCamera()\n camera.position.set(0, 10, 5)\n camera.lookAt(0, 0, 0)\n\n renderer = new WebGLRenderer({canvas: canvas, antialias: true })\n\n const directionalLight = new DirectionalLight(0xffffff, 1.0)\n directionalLight.castShadow = true\n directionalLight.shadow.mapSize.setScalar(1024)\n directionalLight.position.set(5, 30, 5)\n scene.add(directionalLight)\n\n const ambientLight = new AmbientLight(0xffffff, 0.2)\n scene.add(ambientLight)\n\n controls = new OrbitControls(camera, renderer.domElement)\n controls.minDistance = 4\n controls.target.y = 1\n controls.update()\n\n // Load vehicle\n const manager = new LoadingManager()\n const loader = new URDFLoader(manager)\n loader.load('../Cessna/Cessna.urdf', result => {\n vehicle = result\n })\n\n // wait until all the geometry has loaded to add the model to the scene\n manager.onLoad = () => {\n vehicle.quaternion.copy(base_rotation)\n\n vehicle.updateMatrixWorld(true)\n scene.add(vehicle)\n }\n\n onResize()\n window.addEventListener('resize', onResize)\n\n // Start render loop\n render()\n }\n\n function onResize() {\n const width = div.clientWidth\n const height = div.clientHeight\n\n renderer.setSize(width, height);\n renderer.setPixelRatio(window.devicePixelRatio)\n\n camera.aspect = width / height\n camera.updateProjectionMatrix()\n }\n\n function render() {\n requestAnimationFrame(render)\n\n // If throttle is active then animate prop\n const now = Date.now()\n let dt = (now - last_render) / 1000\n last_render = now\n\n if (vehicle != null) {\n let new_value = vehicle.joints.propeller_joint.jointValue[0] + prop_rad_s * dt\n vehicle.joints.propeller_joint.setJointValue(new_value)\n }\n\n renderer.render(scene, camera)\n }\n\n function update_joints(msg) {\n\n if (msg.port != 0) {\n // Only interested in first 16 servos\n return\n }\n\n function normalize_pwm(pwm, reverse) {\n const high = 1900\n const low = 1100\n let value = (pwm - low) / (high - low)\n value = (value - 0.5) * 2.0\n if (reverse === true) {\n value *= -1\n }\n return Math.min(Math.max(value, -1.0), 1.0)\n }\n\n function set_joint(joint, norm) {\n let angle\n if (norm > 0) {\n angle = norm * joint.limit.upper\n } else {\n angle = Math.abs(norm) * joint.limit.lower\n }\n joint.setJointValue(angle)\n }\n\n set_joint(vehicle.joints.elevators_joint, normalize_pwm(msg.servo2_raw))\n set_joint(vehicle.joints.left_aileron_joint, normalize_pwm(msg.servo1_raw, true))\n set_joint(vehicle.joints.right_aileron_joint, normalize_pwm(msg.servo1_raw))\n set_joint(vehicle.joints.rudder_joint, normalize_pwm(msg.servo4_raw))\n\n const max_rpm = 1000\n const prop_rpm = ((msg.servo3_raw - 1000) / 1000) * max_rpm\n prop_rad_s = (prop_rpm / 60) * Math.PI * 2\n }\n\n function update_attitude(msg) {\n const attitude = new Quaternion().setFromEuler(new Euler(msg.roll, msg.pitch, 0.0))\n vehicle.quaternion.multiplyQuaternions(base_rotation, attitude)\n }\n\n function handle_MAVLink(msg) {\n // Need vehicle to update\n if (vehicle == null) {\n return\n }\n\n // Servo positions from SERVO_OUTPUT_RAW\n if (msg._id == 36) {\n update_joints(msg)\n }\n\n // vehicle attitude from ATTITUDE\n if (msg._id == 30) {\n update_attitude(msg)\n }\n }\n\n window.addEventListener('message', function (e) {\n const data = e.data\n\n // User has changed options\n if (\"options\" in data) {\n // Call init once we have some options\n options = data.options\n init()\n }\n\n // Incoming MAVLink message\n if (\"MAVLink\" in data) {\n handle_MAVLink(data.MAVLink)\n }\n\n })\n\n</script>\n</html>\n"
0 commit comments