Robot Assembly Workshop<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <style>\n body {\n margin: 0;\n padding: 0;\n background: linear-gradient(135deg, #1a1a2e, #16213e);\n font-family: 'Arial', sans-serif;\n overflow: hidden;\n }\n \n #container {\n position: relative;\n width: 100vw;\n height: 100vh;\n }\n \n #component-panel {\n position: absolute;\n top: 20px;\n left: 20px;\n background: rgba(0, 0, 0, 0.9);\n padding: 20px;\n border-radius: 15px;\n color: #00d4ff;\n z-index: 100;\n backdrop-filter: blur(10px);\n border: 2px solid #00d4ff;\n max-width: 300px;\n }\n \n .component-btn {\n background: linear-gradient(45deg, #00d4ff, #0099cc);\n border: none;\n padding: 12px 16px;\n margin: 5px;\n border-radius: 8px;\n color: black;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 12px;\n }\n \n .component-btn:hover {\n transform: scale(1.05);\n box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);\n }\n \n .component-btn.active {\n background: linear-gradient(45deg, #ff6b35, #f7931e);\n animation: pulse 2s infinite;\n }\n \n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n \n \/* Component Information Card - Hidden by default *\/\n #component-card {\n position: absolute;\n top: 50%;\n right: 30px;\n transform: translateY(-50%);\n background: rgba(0, 0, 0, 0.95);\n padding: 25px;\n border-radius: 20px;\n color: #fff;\n backdrop-filter: blur(15px);\n border: 3px solid #ff6b35;\n max-width: 400px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\n display: none;\n z-index: 200;\n animation: slideIn 0.5s ease-out;\n }\n \n #component-card.show {\n display: block;\n }\n \n @keyframes slideIn {\n from {\n opacity: 0;\n transform: translateY(-50%) translateX(50px);\n }\n to {\n opacity: 1;\n transform: translateY(-50%) translateX(0);\n }\n }\n \n .card-header {\n color: #ff6b35;\n font-size: 24px;\n font-weight: bold;\n margin-bottom: 15px;\n text-shadow: 0 0 10px rgba(255, 107, 53, 0.5);\n }\n \n .card-section {\n margin: 15px 0;\n padding: 12px;\n background: rgba(255, 107, 53, 0.1);\n border-radius: 8px;\n border-left: 4px solid #ff6b35;\n }\n \n .card-section h4 {\n color: #00d4ff;\n margin: 0 0 8px 0;\n font-size: 16px;\n }\n \n .close-btn {\n position: absolute;\n top: 15px;\n right: 20px;\n background: #ff4757;\n border: none;\n color: white;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n cursor: pointer;\n font-size: 18px;\n font-weight: bold;\n }\n \n .close-btn:hover {\n background: #ff3742;\n }\n \n \/* Minimal controls *\/\n #controls {\n position: absolute;\n bottom: 20px;\n left: 20px;\n background: rgba(0, 0, 0, 0.8);\n padding: 15px;\n border-radius: 10px;\n color: #50fa7b;\n border: 2px solid #50fa7b;\n }\n \n .control-btn {\n background: linear-gradient(45deg, #50fa7b, #00ff88);\n border: none;\n padding: 8px 12px;\n margin: 3px;\n border-radius: 5px;\n color: black;\n font-weight: bold;\n cursor: pointer;\n font-size: 11px;\n }\n \n .control-btn:hover {\n transform: scale(1.05);\n }\n \n h3 {\n margin-top: 0;\n text-shadow: 0 0 15px currentColor;\n }\n \n \/* Instructions *\/\n .instructions {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: rgba(0, 0, 0, 0.8);\n padding: 20px;\n border-radius: 15px;\n color: #fff;\n text-align: center;\n border: 2px solid #00d4ff;\n z-index: 150;\n animation: fadeIn 2s ease-in-out;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n .instructions.hidden {\n display: none;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"container\">\n \n <div id=\"component-panel\">\n <h3>\ud83e\udd16 Robot Components<\/h3>\n <div>\n <button class=\"component-btn\" onclick=\"showComponent('chassis')\">Chassis<\/button>\n <button class=\"component-btn\" onclick=\"showComponent('motors')\">Motors<\/button>\n <button class=\"component-btn\" onclick=\"showComponent('wheels')\">Wheels<\/button>\n <\/div>\n <div>\n <button class=\"component-btn\" onclick=\"showComponent('sensors')\">Sensors<\/button>\n <button class=\"component-btn\" onclick=\"showComponent('battery')\">Battery<\/button>\n <button class=\"component-btn\" onclick=\"showComponent('controller')\">Controller<\/button>\n <\/div>\n <div>\n <button class=\"component-btn\" onclick=\"showComponent('camera')\">Camera<\/button>\n <button class=\"component-btn\" onclick=\"showComponent('arm')\">Robot Arm<\/button>\n <button class=\"component-btn\" onclick=\"showComponent('antenna')\">Antenna<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"component-card\">\n <button class=\"close-btn\" onclick=\"hideComponent()\">\u00d7<\/button>\n <div class=\"card-header\" id=\"card-title\">Component Name<\/div>\n <div id=\"card-content\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"instructions\" id=\"instructions\">\n <h2>\ud83d\ude80 Welcome to Robot Assembly Workshop!<\/h2>\n <p>Click any component button on the left to learn about robot parts<\/p>\n <p style=\"font-size: 14px; color: #888;\">This message will disappear when you select a component<\/p>\n <\/div>\n\n \n <div id=\"controls\">\n <h3>\ud83c\udfae Controls<\/h3>\n <button class=\"control-btn\" onclick=\"explodeView()\">Explode<\/button>\n <button class=\"control-btn\" onclick=\"resetView()\">Reset<\/button>\n <button class=\"control-btn\" onclick=\"randomColors()\">Colors<\/button>\n <div style=\"font-size: 10px; margin-top: 8px; color: #888;\">\n Mouse: Rotate \u2022 Wheel: Zoom\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Scene setup\n const scene = new THREE.Scene();\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.setClearColor(0x0a0a1a);\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n document.getElementById('container').appendChild(renderer.domElement);\n\n \/\/ Enhanced lighting\n const ambientLight = new THREE.AmbientLight(0x404060, 0.5);\n scene.add(ambientLight);\n\n const directionalLight = new THREE.DirectionalLight(0xffffff, 1);\n directionalLight.position.set(15, 20, 15);\n directionalLight.castShadow = true;\n scene.add(directionalLight);\n\n const spotLight1 = new THREE.SpotLight(0x00d4ff, 0.8, 50, Math.PI \/ 6);\n spotLight1.position.set(-10, 15, 10);\n scene.add(spotLight1);\n\n const spotLight2 = new THREE.SpotLight(0xff6b35, 0.6, 50, Math.PI \/ 8);\n spotLight2.position.set(10, 15, -10);\n scene.add(spotLight2);\n\n \/\/ Workshop environment\n const floorGeometry = new THREE.PlaneGeometry(30, 30);\n const floorMaterial = new THREE.MeshLambertMaterial({ \n color: 0x2a2a2a,\n transparent: true,\n opacity: 0.8\n });\n const floor = new THREE.Mesh(floorGeometry, floorMaterial);\n floor.rotation.x = -Math.PI \/ 2;\n floor.receiveShadow = true;\n scene.add(floor);\n\n \/\/ Grid pattern\n const gridHelper = new THREE.GridHelper(30, 30, 0x00d4ff, 0x444444);\n gridHelper.material.opacity = 0.2;\n gridHelper.material.transparent = true;\n scene.add(gridHelper);\n\n \/\/ Robot components\n const robotComponents = {};\n const componentColors = {\n chassis: 0x00aa00,\n motors: 0xff4444,\n wheels: 0x333333,\n sensors: 0x0066ff,\n battery: 0xffaa00,\n controller: 0x8844aa,\n camera: 0x00ffaa,\n arm: 0xff6600,\n antenna: 0xffff00\n };\n\n \/\/ Create all robot components (same as before but simplified)\n \/\/ Chassis\n const chassisGeometry = new THREE.BoxGeometry(4, 1, 6);\n const chassisMaterial = new THREE.MeshPhongMaterial({ color: componentColors.chassis });\n robotComponents.chassis = new THREE.Mesh(chassisGeometry, chassisMaterial);\n robotComponents.chassis.position.set(0, 0.5, 0);\n robotComponents.chassis.castShadow = true;\n scene.add(robotComponents.chassis);\n\n \/\/ Motors\n const motorGeometry = new THREE.CylinderGeometry(0.6, 0.6, 1.5);\n const motorMaterial = new THREE.MeshPhongMaterial({ color: componentColors.motors });\n robotComponents.motors = new THREE.Group();\n for (let i = 0; i < 4; i++) {\n const motor = new THREE.Mesh(motorGeometry, motorMaterial);\n const angle = (i \/ 4) * Math.PI * 2;\n motor.position.set(Math.cos(angle) * 2.2, 0, Math.sin(angle) * 3.2);\n motor.rotation.z = Math.PI \/ 2;\n motor.castShadow = true;\n robotComponents.motors.add(motor);\n }\n scene.add(robotComponents.motors);\n\n \/\/ Wheels\n const wheelGeometry = new THREE.CylinderGeometry(1, 1, 0.5);\n const wheelMaterial = new THREE.MeshPhongMaterial({ color: componentColors.wheels });\n robotComponents.wheels = new THREE.Group();\n for (let i = 0; i < 4; i++) {\n const wheel = new THREE.Mesh(wheelGeometry, wheelMaterial);\n const angle = (i \/ 4) * Math.PI * 2;\n wheel.position.set(Math.cos(angle) * 2.5, 0, Math.sin(angle) * 3.5);\n wheel.rotation.z = Math.PI \/ 2;\n wheel.castShadow = true;\n robotComponents.wheels.add(wheel);\n }\n scene.add(robotComponents.wheels);\n\n \/\/ Sensors\n const sensorGeometry = new THREE.SphereGeometry(0.3);\n const sensorMaterial = new THREE.MeshPhongMaterial({ color: componentColors.sensors });\n robotComponents.sensors = new THREE.Group();\n const sensorPositions = [[0, 2, 3], [1.5, 2, 2], [-1.5, 2, 2], [0, 2, -3]];\n sensorPositions.forEach(pos => {\n const sensor = new THREE.Mesh(sensorGeometry, sensorMaterial);\n sensor.position.set(pos[0], pos[1], pos[2]);\n sensor.castShadow = true;\n robotComponents.sensors.add(sensor);\n });\n scene.add(robotComponents.sensors);\n\n \/\/ Battery\n const batteryGeometry = new THREE.BoxGeometry(2, 0.8, 1.5);\n const batteryMaterial = new THREE.MeshPhongMaterial({ color: componentColors.battery });\n robotComponents.battery = new THREE.Mesh(batteryGeometry, batteryMaterial);\n robotComponents.battery.position.set(0, 0.4, -1.5);\n robotComponents.battery.castShadow = true;\n scene.add(robotComponents.battery);\n\n \/\/ Controller\n const controllerGeometry = new THREE.BoxGeometry(1.5, 0.3, 2);\n const controllerMaterial = new THREE.MeshPhongMaterial({ color: componentColors.controller });\n robotComponents.controller = new THREE.Mesh(controllerGeometry, controllerMaterial);\n robotComponents.controller.position.set(0, 1.2, 0);\n robotComponents.controller.castShadow = true;\n scene.add(robotComponents.controller);\n\n \/\/ Camera\n const cameraGeometry = new THREE.BoxGeometry(0.8, 0.6, 0.4);\n const cameraMaterial = new THREE.MeshPhongMaterial({ color: componentColors.camera });\n robotComponents.camera = new THREE.Mesh(cameraGeometry, cameraMaterial);\n robotComponents.camera.position.set(0, 1.8, 2.8);\n robotComponents.camera.castShadow = true;\n scene.add(robotComponents.camera);\n\n \/\/ Robot Arm\n const armGeometry = new THREE.CylinderGeometry(0.2, 0.2, 2);\n const armMaterial = new THREE.MeshPhongMaterial({ color: componentColors.arm });\n robotComponents.arm = new THREE.Group();\n const armBase = new THREE.Mesh(new THREE.CylinderGeometry(0.4, 0.4, 0.5), armMaterial);\n armBase.position.set(1.5, 1, 0);\n robotComponents.arm.add(armBase);\n const armSegment1 = new THREE.Mesh(armGeometry, armMaterial);\n armSegment1.position.set(1.5, 2, 0);\n armSegment1.castShadow = true;\n robotComponents.arm.add(armSegment1);\n scene.add(robotComponents.arm);\n\n \/\/ Antenna\n const antennaGeometry = new THREE.CylinderGeometry(0.05, 0.05, 3);\n const antennaMaterial = new THREE.MeshPhongMaterial({ color: componentColors.antenna });\n robotComponents.antenna = new THREE.Mesh(antennaGeometry, antennaMaterial);\n robotComponents.antenna.position.set(-1, 2.5, -2);\n robotComponents.antenna.castShadow = true;\n scene.add(robotComponents.antenna);\n\n \/\/ Component information database\n const componentInfo = {\n chassis: {\n name: '\ud83c\udfd7\ufe0f Robot Chassis',\n description: 'The main structural frame that holds all robot components together.',\n functions: ['Structural support', 'Component mounting', 'Protection', 'Heat dissipation'],\n specs: 'Material: Aluminum 6061 | Weight: 2.3kg | Dimensions: 40\u00d710\u00d760cm'\n },\n motors: {\n name: '\u26a1 Drive Motors',\n description: 'High-torque brushless DC motors for precise wheel control.',\n functions: ['Wheel rotation', 'Speed control', 'Direction control', 'Position feedback'],\n specs: 'Type: Brushless DC | Power: 12V, 5A | Torque: 15 Nm | Speed: 120 RPM'\n },\n wheels: {\n name: '\ud83d\udede All-Terrain Wheels',\n description: 'Specially designed wheels with deep tread for maximum traction.',\n functions: ['Ground contact', 'Traction', 'Shock absorption', 'Stability'],\n specs: 'Diameter: 20cm | Width: 5cm | Material: High-grip rubber | Load: 50kg each'\n },\n sensors: {\n name: '\ud83d\udce1 Sensor Array',\n description: 'Multiple sensors providing 360\u00b0 environmental awareness.',\n functions: ['Obstacle detection', 'Distance measurement', 'Environmental mapping', 'Navigation'],\n specs: 'Types: Ultrasonic, LIDAR, IMU | Range: 0.02-4m | Accuracy: \u00b11cm | Rate: 40Hz'\n },\n battery: {\n name: '\ud83d\udd0b Power System',\n description: 'Advanced lithium-ion battery pack for extended operations.',\n functions: ['Power supply', 'Energy storage', 'Voltage regulation', 'Power monitoring'],\n specs: 'Type: Li-ion | Capacity: 5000mAh | Voltage: 12V | Runtime: 8 hours'\n },\n controller: {\n name: '\ud83e\udde0 Main Controller',\n description: 'The robot\\'s brain - processing sensor data and controlling functions.',\n functions: ['Data processing', 'Motor control', 'Sensor integration', 'Communication'],\n specs: 'CPU: ARM Cortex-A72 | RAM: 4GB | Storage: 32GB | I\/O: 40 GPIO pins'\n },\n camera: {\n name: '\ud83d\udc41\ufe0f Vision System',\n description: 'HD camera with advanced image processing capabilities.',\n functions: ['Visual navigation', 'Object detection', 'Recording', 'Night vision'],\n specs: 'Resolution: 1920\u00d71080 | Frame rate: 30fps | FOV: 62\u00b0 | Night vision: 10m'\n },\n arm: {\n name: '\ud83e\uddbe Robotic Arm',\n description: 'Precision manipulator for complex object handling tasks.',\n functions: ['Object grasping', 'Sample collection', 'Tool operation', 'Precise positioning'],\n specs: 'DOF: 6 joints | Reach: 150cm | Payload: 5kg | Precision: \u00b10.5mm'\n },\n antenna: {\n name: '\ud83d\udcf6 Communication System',\n description: 'High-gain antenna for long-range data transmission.',\n functions: ['Data transmission', 'Command reception', 'Video streaming', 'Telemetry'],\n specs: 'Frequency: 2.4\/5.8 GHz | Range: 10km | Gain: 15dBi | Data rate: 100 Mbps'\n }\n };\n\n \/\/ Camera controls\n let mouseX = 0, mouseY = 0;\n let cameraAngle = 0;\n let cameraDistance = 12;\n let selectedComponent = null;\n let exploded = false;\n\n camera.position.set(cameraDistance, 8, cameraDistance);\n camera.lookAt(0, 2, 0);\n\n \/\/ Main functions\n window.showComponent = function(componentName) {\n \/\/ Hide instructions\n document.getElementById('instructions').classList.add('hidden');\n \n \/\/ Reset previous selection\n if (selectedComponent) {\n const prevComponent = robotComponents[selectedComponent];\n if (prevComponent) {\n prevComponent.traverse(child => {\n if (child.material) {\n child.material.emissive.setHex(0x000000);\n }\n });\n }\n }\n\n \/\/ Update buttons\n document.querySelectorAll('.component-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n event.target.classList.add('active');\n\n \/\/ Highlight selected component\n selectedComponent = componentName;\n const component = robotComponents[componentName];\n if (component) {\n component.traverse(child => {\n if (child.material) {\n child.material.emissive.setHex(0x333333);\n }\n });\n }\n\n \/\/ Show component card\n showComponentCard(componentName);\n };\n\n function showComponentCard(componentName) {\n const info = componentInfo[componentName];\n const card = document.getElementById('component-card');\n const title = document.getElementById('card-title');\n const content = document.getElementById('card-content');\n\n title.textContent = info.name;\n content.innerHTML = `\n <div class=\"card-section\">\n <h4>\ud83d\udcdd Description<\/h4>\n <p>${info.description}<\/p>\n <\/div>\n <div class=\"card-section\">\n <h4>\u2699\ufe0f Key Functions<\/h4>\n <ul style=\"margin: 8px 0; padding-left: 20px;\">\n ${info.functions.map(func => <li>${func}<\/li>).join('')}\n <\/ul>\n <\/div>\n <div class=\"card-section\">\n <h4>\ud83d\udcca Specifications<\/h4>\n <p style=\"font-family: monospace; font-size: 12px; background: rgba(0,0,0,0.3); padding: 8px; border-radius: 4px;\">${info.specs}<\/p>\n <\/div>\n `;\n\n card.classList.add('show');\n }\n\n window.hideComponent = function() {\n document.getElementById('component-card').classList.remove('show');\n \n \/\/ Reset component highlighting\n if (selectedComponent) {\n const component = robotComponents[selectedComponent];\n if (component) {\n component.traverse(child => {\n if (child.material) {\n child.material.emissive.setHex(0x000000);\n }\n });\n }\n }\n \n \/\/ Reset buttons\n document.querySelectorAll('.component-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n \n selectedComponent = null;\n };\n\n window.explodeView = function() {\n exploded = !exploded;\n Object.keys(robotComponents).forEach((key, index) => {\n const component = robotComponents[key];\n if (exploded) {\n const angle = (index \/ Object.keys(robotComponents).length) * Math.PI * 2;\n const distance = 6;\n component.position.x = Math.cos(angle) * distance;\n component.position.z = Math.sin(angle) * distance;\n component.position.y = 2 + index * 1;\n } else {\n resetPositions();\n }\n });\n };\n\n window.resetView = function() {\n exploded = false;\n resetPositions();\n hideComponent();\n };\n\n window.randomColors = function() {\n const colors = [0xff6b35, 0x00d4ff, 0x50fa7b, 0xbd93f9, 0xffaa00, 0xff4444, 0x00ffaa, 0x8844aa];\n Object.values(robotComponents).forEach(component => {\n const randomColor = colors[Math.floor(Math.random() * colors.length)];\n component.traverse(child => {\n if (child.material) {\n child.material.color.setHex(randomColor);\n }\n });\n });\n };\n\n function resetPositions() {\n robotComponents.chassis.position.set(0, 0.5, 0);\n robotComponents.motors.position.set(0, 0, 0);\n robotComponents.wheels.position.set(0, 0, 0);\n robotComponents.sensors.position.set(0, 0, 0);\n robotComponents.battery.position.set(0, 0.4, -1.5);\n robotComponents.controller.position.set(0, 1.2, 0);\n robotComponents.camera.position.set(0, 1.8, 2.8);\n robotComponents.arm.position.set(0, 0, 0);\n robotComponents.antenna.position.set(-1, 2.5, -2);\n }\n\n \/\/ Mouse controls\n document.addEventListener('mousemove', (event) => {\n mouseX = (event.clientX \/ window.innerWidth) * 2 - 1;\n mouseY = -(event.clientY \/ window.innerHeight) * 2 + 1;\n });\n\n document.addEventListener('wheel', (event) => {\n cameraDistance += event.deltaY * 0.01;\n cameraDistance = Math.max(5, Math.min(25, cameraDistance));\n });\n\n \/\/ Animation loop\n let time = 0;\n function animate() {\n requestAnimationFrame(animate);\n time += 0.01;\n\n \/\/ Camera orbit\n cameraAngle += 0.005;\n camera.position.x = Math.cos(cameraAngle + mouseX * 0.5) * cameraDistance;\n camera.position.z = Math.sin(cameraAngle + mouseX * 0.5) * cameraDistance;\n camera.position.y = 8 + mouseY * 3;\n camera.lookAt(0, 2, 0);\n\n \/\/ Animate selected component\n if (selectedComponent && robotComponents[selectedComponent]) {\n const component = robotComponents[selectedComponent];\n component.rotation.y = time * 0.5;\n }\n\n renderer.render(scene, camera);\n }\n\n \/\/ Handle window resize\n window.addEventListener('resize', () => {\n camera.aspect = window.innerWidth \/ window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n });\n\n \/\/ Start animation\n animate();\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Robot Assembly Workshop \ud83e\udd16 Robot Components Chassis Motors Wheels Sensors Battery Controller Camera Robot Arm Antenna \u00d7 Component Name \ud83d\ude80 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-400","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages\/400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/comments?post=400"}],"version-history":[{"count":4,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages\/400\/revisions"}],"predecessor-version":[{"id":405,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages\/400\/revisions\/405"}],"wp:attachment":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/media?parent=400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Robot Assembly Workshop<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <style>\n body {\n margin: 0;\n padding: 0;\n background: linear-gradient(135deg, #1a1a2e, #16213e);\n font-family: 'Arial', sans-serif;\n overflow: hidden;\n }\n \n #container {\n position: relative;\n width: 100vw;\n height: 100vh;\n }\n \n #component-panel {\n position: absolute;\n top: 20px;\n left: 20px;\n background: rgba(0, 0, 0, 0.9);\n padding: 20px;\n border-radius: 15px;\n color: #00d4ff;\n z-index: 100;\n backdrop-filter: blur(10px);\n border: 2px solid #00d4ff;\n max-width: 300px;\n }\n \n .component-btn {\n background: linear-gradient(45deg, #00d4ff, #0099cc);\n border: none;\n padding: 12px 16px;\n margin: 5px;\n border-radius: 8px;\n color: black;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 12px;\n }\n \n .component-btn:hover {\n transform: scale(1.05);\n box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);\n }\n \n .component-btn.active {\n background: linear-gradient(45deg, #ff6b35, #f7931e);\n animation: pulse 2s infinite;\n }\n \n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n \n \/* Component Information Card - Hidden by default *\/\n #component-card {\n position: absolute;\n top: 50%;\n right: 30px;\n transform: translateY(-50%);\n background: rgba(0, 0, 0, 0.95);\n padding: 25px;\n border-radius: 20px;\n color: #fff;\n backdrop-filter: blur(15px);\n border: 3px solid #ff6b35;\n max-width: 400px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\n display: none;\n z-index: 200;\n animation: slideIn 0.5s ease-out;\n }\n \n #component-card.show {\n display: block;\n }\n \n @keyframes slideIn {\n from {\n opacity: 0;\n transform: translateY(-50%) translateX(50px);\n }\n to {\n opacity: 1;\n transform: translateY(-50%) translateX(0);\n }\n }\n \n .card-header {\n color: #ff6b35;\n font-size: 24px;\n font-weight: bold;\n margin-bottom: 15px;\n text-shadow: 0 0 10px rgba(255, 107, 53, 0.5);\n }\n \n .card-section {\n margin: 15px 0;\n padding: 12px;\n background: rgba(255, 107, 53, 0.1);\n border-radius: 8px;\n border-left: 4px solid #ff6b35;\n }\n \n .card-section h4 {\n color: #00d4ff;\n margin: 0 0 8px 0;\n font-size: 16px;\n }\n \n .close-btn {\n position: absolute;\n top: 15px;\n right: 20px;\n background: #ff4757;\n border: none;\n color: white;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n cursor: pointer;\n font-size: 18px;\n font-weight: bold;\n }\n \n .close-btn:hover {\n background: #ff3742;\n }\n \n \/* Minimal controls *\/\n #controls {\n position: absolute;\n bottom: 20px;\n left: 20px;\n background: rgba(0, 0, 0, 0.8);\n padding: 15px;\n border-radius: 10px;\n color: #50fa7b;\n border: 2px solid #50fa7b;\n }\n \n .control-btn {\n background: linear-gradient(45deg, #50fa7b, #00ff88);\n border: none;\n padding: 8px 12px;\n margin: 3px;\n border-radius: 5px;\n color: black;\n font-weight: bold;\n cursor: pointer;\n font-size: 11px;\n }\n \n .control-btn:hover {\n transform: scale(1.05);\n }\n \n h3 {\n margin-top: 0;\n text-shadow: 0 0 15px currentColor;\n }\n \n \/* Instructions *\/\n .instructions {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: rgba(0, 0, 0, 0.8);\n padding: 20px;\n border-radius: 15px;\n color: #fff;\n text-align: center;\n border: 2px solid #00d4ff;\n z-index: 150;\n animation: fadeIn 2s ease-in-out;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n .instructions.hidden {\n display: none;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"container\">\n \n <div id=\"component-panel\">\n <h3>\ud83e\udd16 Robot Components<\/h3>\n <div>\n <button class=\"component-btn\" onclick=\"showComponent('chassis')\">Chassis<\/button>\n <button class=\"component-btn\" onclick=\"showComponent('motors')\">Motors<\/button>\n <button class=\"component-btn\" onclick=\"showComponent('wheels')\">Wheels<\/button>\n <\/div>\n <div>\n <button class=\"component-btn\" onclick=\"showComponent('sensors')\">Sensors<\/button>\n <button class=\"component-btn\" onclick=\"showComponent('battery')\">Battery<\/button>\n <button class=\"component-btn\" onclick=\"showComponent('controller')\">Controller<\/button>\n <\/div>\n <div>\n <button class=\"component-btn\" onclick=\"showComponent('camera')\">Camera<\/button>\n <button class=\"component-btn\" onclick=\"showComponent('arm')\">Robot Arm<\/button>\n <button class=\"component-btn\" onclick=\"showComponent('antenna')\">Antenna<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"component-card\">\n <button class=\"close-btn\" onclick=\"hideComponent()\">\u00d7<\/button>\n <div class=\"card-header\" id=\"card-title\">Component Name<\/div>\n <div id=\"card-content\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"instructions\" id=\"instructions\">\n <h2>\ud83d\ude80 Welcome to Robot Assembly Workshop!<\/h2>\n <p>Click any component button on the left to learn about robot parts<\/p>\n <p style=\"font-size: 14px; color: #888;\">This message will disappear when you select a component<\/p>\n <\/div>\n\n \n <div id=\"controls\">\n <h3>\ud83c\udfae Controls<\/h3>\n <button class=\"control-btn\" onclick=\"explodeView()\">Explode<\/button>\n <button class=\"control-btn\" onclick=\"resetView()\">Reset<\/button>\n <button class=\"control-btn\" onclick=\"randomColors()\">Colors<\/button>\n <div style=\"font-size: 10px; margin-top: 8px; color: #888;\">\n Mouse: Rotate \u2022 Wheel: Zoom\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Scene setup\n const scene = new THREE.Scene();\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.setClearColor(0x0a0a1a);\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n document.getElementById('container').appendChild(renderer.domElement);\n\n \/\/ Enhanced lighting\n const ambientLight = new THREE.AmbientLight(0x404060, 0.5);\n scene.add(ambientLight);\n\n const directionalLight = new THREE.DirectionalLight(0xffffff, 1);\n directionalLight.position.set(15, 20, 15);\n directionalLight.castShadow = true;\n scene.add(directionalLight);\n\n const spotLight1 = new THREE.SpotLight(0x00d4ff, 0.8, 50, Math.PI \/ 6);\n spotLight1.position.set(-10, 15, 10);\n scene.add(spotLight1);\n\n const spotLight2 = new THREE.SpotLight(0xff6b35, 0.6, 50, Math.PI \/ 8);\n spotLight2.position.set(10, 15, -10);\n scene.add(spotLight2);\n\n \/\/ Workshop environment\n const floorGeometry = new THREE.PlaneGeometry(30, 30);\n const floorMaterial = new THREE.MeshLambertMaterial({ \n color: 0x2a2a2a,\n transparent: true,\n opacity: 0.8\n });\n const floor = new THREE.Mesh(floorGeometry, floorMaterial);\n floor.rotation.x = -Math.PI \/ 2;\n floor.receiveShadow = true;\n scene.add(floor);\n\n \/\/ Grid pattern\n const gridHelper = new THREE.GridHelper(30, 30, 0x00d4ff, 0x444444);\n gridHelper.material.opacity = 0.2;\n gridHelper.material.transparent = true;\n scene.add(gridHelper);\n\n \/\/ Robot components\n const robotComponents = {};\n const componentColors = {\n chassis: 0x00aa00,\n motors: 0xff4444,\n wheels: 0x333333,\n sensors: 0x0066ff,\n battery: 0xffaa00,\n controller: 0x8844aa,\n camera: 0x00ffaa,\n arm: 0xff6600,\n antenna: 0xffff00\n };\n\n \/\/ Create all robot components (same as before but simplified)\n \/\/ Chassis\n const chassisGeometry = new THREE.BoxGeometry(4, 1, 6);\n const chassisMaterial = new THREE.MeshPhongMaterial({ color: componentColors.chassis });\n robotComponents.chassis = new THREE.Mesh(chassisGeometry, chassisMaterial);\n robotComponents.chassis.position.set(0, 0.5, 0);\n robotComponents.chassis.castShadow = true;\n scene.add(robotComponents.chassis);\n\n \/\/ Motors\n const motorGeometry = new THREE.CylinderGeometry(0.6, 0.6, 1.5);\n const motorMaterial = new THREE.MeshPhongMaterial({ color: componentColors.motors });\n robotComponents.motors = new THREE.Group();\n for (let i = 0; i < 4; i++) {\n const motor = new THREE.Mesh(motorGeometry, motorMaterial);\n const angle = (i \/ 4) * Math.PI * 2;\n motor.position.set(Math.cos(angle) * 2.2, 0, Math.sin(angle) * 3.2);\n motor.rotation.z = Math.PI \/ 2;\n motor.castShadow = true;\n robotComponents.motors.add(motor);\n }\n scene.add(robotComponents.motors);\n\n \/\/ Wheels\n const wheelGeometry = new THREE.CylinderGeometry(1, 1, 0.5);\n const wheelMaterial = new THREE.MeshPhongMaterial({ color: componentColors.wheels });\n robotComponents.wheels = new THREE.Group();\n for (let i = 0; i < 4; i++) {\n const wheel = new THREE.Mesh(wheelGeometry, wheelMaterial);\n const angle = (i \/ 4) * Math.PI * 2;\n wheel.position.set(Math.cos(angle) * 2.5, 0, Math.sin(angle) * 3.5);\n wheel.rotation.z = Math.PI \/ 2;\n wheel.castShadow = true;\n robotComponents.wheels.add(wheel);\n }\n scene.add(robotComponents.wheels);\n\n \/\/ Sensors\n const sensorGeometry = new THREE.SphereGeometry(0.3);\n const sensorMaterial = new THREE.MeshPhongMaterial({ color: componentColors.sensors });\n robotComponents.sensors = new THREE.Group();\n const sensorPositions = [[0, 2, 3], [1.5, 2, 2], [-1.5, 2, 2], [0, 2, -3]];\n sensorPositions.forEach(pos => {\n const sensor = new THREE.Mesh(sensorGeometry, sensorMaterial);\n sensor.position.set(pos[0], pos[1], pos[2]);\n sensor.castShadow = true;\n robotComponents.sensors.add(sensor);\n });\n scene.add(robotComponents.sensors);\n\n \/\/ Battery\n const batteryGeometry = new THREE.BoxGeometry(2, 0.8, 1.5);\n const batteryMaterial = new THREE.MeshPhongMaterial({ color: componentColors.battery });\n robotComponents.battery = new THREE.Mesh(batteryGeometry, batteryMaterial);\n robotComponents.battery.position.set(0, 0.4, -1.5);\n robotComponents.battery.castShadow = true;\n scene.add(robotComponents.battery);\n\n \/\/ Controller\n const controllerGeometry = new THREE.BoxGeometry(1.5, 0.3, 2);\n const controllerMaterial = new THREE.MeshPhongMaterial({ color: componentColors.controller });\n robotComponents.controller = new THREE.Mesh(controllerGeometry, controllerMaterial);\n robotComponents.controller.position.set(0, 1.2, 0);\n robotComponents.controller.castShadow = true;\n scene.add(robotComponents.controller);\n\n \/\/ Camera\n const cameraGeometry = new THREE.BoxGeometry(0.8, 0.6, 0.4);\n const cameraMaterial = new THREE.MeshPhongMaterial({ color: componentColors.camera });\n robotComponents.camera = new THREE.Mesh(cameraGeometry, cameraMaterial);\n robotComponents.camera.position.set(0, 1.8, 2.8);\n robotComponents.camera.castShadow = true;\n scene.add(robotComponents.camera);\n\n \/\/ Robot Arm\n const armGeometry = new THREE.CylinderGeometry(0.2, 0.2, 2);\n const armMaterial = new THREE.MeshPhongMaterial({ color: componentColors.arm });\n robotComponents.arm = new THREE.Group();\n const armBase = new THREE.Mesh(new THREE.CylinderGeometry(0.4, 0.4, 0.5), armMaterial);\n armBase.position.set(1.5, 1, 0);\n robotComponents.arm.add(armBase);\n const armSegment1 = new THREE.Mesh(armGeometry, armMaterial);\n armSegment1.position.set(1.5, 2, 0);\n armSegment1.castShadow = true;\n robotComponents.arm.add(armSegment1);\n scene.add(robotComponents.arm);\n\n \/\/ Antenna\n const antennaGeometry = new THREE.CylinderGeometry(0.05, 0.05, 3);\n const antennaMaterial = new THREE.MeshPhongMaterial({ color: componentColors.antenna });\n robotComponents.antenna = new THREE.Mesh(antennaGeometry, antennaMaterial);\n robotComponents.antenna.position.set(-1, 2.5, -2);\n robotComponents.antenna.castShadow = true;\n scene.add(robotComponents.antenna);\n\n \/\/ Component information database\n const componentInfo = {\n chassis: {\n name: '\ud83c\udfd7\ufe0f Robot Chassis',\n description: 'The main structural frame that holds all robot components together.',\n functions: ['Structural support', 'Component mounting', 'Protection', 'Heat dissipation'],\n specs: 'Material: Aluminum 6061 | Weight: 2.3kg | Dimensions: 40\u00d710\u00d760cm'\n },\n motors: {\n name: '\u26a1 Drive Motors',\n description: 'High-torque brushless DC motors for precise wheel control.',\n functions: ['Wheel rotation', 'Speed control', 'Direction control', 'Position feedback'],\n specs: 'Type: Brushless DC | Power: 12V, 5A | Torque: 15 Nm | Speed: 120 RPM'\n },\n wheels: {\n name: '\ud83d\udede All-Terrain Wheels',\n description: 'Specially designed wheels with deep tread for maximum traction.',\n functions: ['Ground contact', 'Traction', 'Shock absorption', 'Stability'],\n specs: 'Diameter: 20cm | Width: 5cm | Material: High-grip rubber | Load: 50kg each'\n },\n sensors: {\n name: '\ud83d\udce1 Sensor Array',\n description: 'Multiple sensors providing 360\u00b0 environmental awareness.',\n functions: ['Obstacle detection', 'Distance measurement', 'Environmental mapping', 'Navigation'],\n specs: 'Types: Ultrasonic, LIDAR, IMU | Range: 0.02-4m | Accuracy: \u00b11cm | Rate: 40Hz'\n },\n battery: {\n name: '\ud83d\udd0b Power System',\n description: 'Advanced lithium-ion battery pack for extended operations.',\n functions: ['Power supply', 'Energy storage', 'Voltage regulation', 'Power monitoring'],\n specs: 'Type: Li-ion | Capacity: 5000mAh | Voltage: 12V | Runtime: 8 hours'\n },\n controller: {\n name: '\ud83e\udde0 Main Controller',\n description: 'The robot\\'s brain - processing sensor data and controlling functions.',\n functions: ['Data processing', 'Motor control', 'Sensor integration', 'Communication'],\n specs: 'CPU: ARM Cortex-A72 | RAM: 4GB | Storage: 32GB | I\/O: 40 GPIO pins'\n },\n camera: {\n name: '\ud83d\udc41\ufe0f Vision System',\n description: 'HD camera with advanced image processing capabilities.',\n functions: ['Visual navigation', 'Object detection', 'Recording', 'Night vision'],\n specs: 'Resolution: 1920\u00d71080 | Frame rate: 30fps | FOV: 62\u00b0 | Night vision: 10m'\n },\n arm: {\n name: '\ud83e\uddbe Robotic Arm',\n description: 'Precision manipulator for complex object handling tasks.',\n functions: ['Object grasping', 'Sample collection', 'Tool operation', 'Precise positioning'],\n specs: 'DOF: 6 joints | Reach: 150cm | Payload: 5kg | Precision: \u00b10.5mm'\n },\n antenna: {\n name: '\ud83d\udcf6 Communication System',\n description: 'High-gain antenna for long-range data transmission.',\n functions: ['Data transmission', 'Command reception', 'Video streaming', 'Telemetry'],\n specs: 'Frequency: 2.4\/5.8 GHz | Range: 10km | Gain: 15dBi | Data rate: 100 Mbps'\n }\n };\n\n \/\/ Camera controls\n let mouseX = 0, mouseY = 0;\n let cameraAngle = 0;\n let cameraDistance = 12;\n let selectedComponent = null;\n let exploded = false;\n\n camera.position.set(cameraDistance, 8, cameraDistance);\n camera.lookAt(0, 2, 0);\n\n \/\/ Main functions\n window.showComponent = function(componentName) {\n \/\/ Hide instructions\n document.getElementById('instructions').classList.add('hidden');\n \n \/\/ Reset previous selection\n if (selectedComponent) {\n const prevComponent = robotComponents[selectedComponent];\n if (prevComponent) {\n prevComponent.traverse(child => {\n if (child.material) {\n child.material.emissive.setHex(0x000000);\n }\n });\n }\n }\n\n \/\/ Update buttons\n document.querySelectorAll('.component-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n event.target.classList.add('active');\n\n \/\/ Highlight selected component\n selectedComponent = componentName;\n const component = robotComponents[componentName];\n if (component) {\n component.traverse(child => {\n if (child.material) {\n child.material.emissive.setHex(0x333333);\n }\n });\n }\n\n \/\/ Show component card\n showComponentCard(componentName);\n };\n\n function showComponentCard(componentName) {\n const info = componentInfo[componentName];\n const card = document.getElementById('component-card');\n const title = document.getElementById('card-title');\n const content = document.getElementById('card-content');\n\n title.textContent = info.name;\n content.innerHTML = `\n <div class=\"card-section\">\n <h4>\ud83d\udcdd Description<\/h4>\n <p>${info.description}<\/p>\n <\/div>\n <div class=\"card-section\">\n <h4>\u2699\ufe0f Key Functions<\/h4>\n <ul style=\"margin: 8px 0; padding-left: 20px;\">\n ${info.functions.map(func => <li>${func}<\/li>).join('')}\n <\/ul>\n <\/div>\n <div class=\"card-section\">\n <h4>\ud83d\udcca Specifications<\/h4>\n <p style=\"font-family: monospace; font-size: 12px; background: rgba(0,0,0,0.3); padding: 8px; border-radius: 4px;\">${info.specs}<\/p>\n <\/div>\n `;\n\n card.classList.add('show');\n }\n\n window.hideComponent = function() {\n document.getElementById('component-card').classList.remove('show');\n \n \/\/ Reset component highlighting\n if (selectedComponent) {\n const component = robotComponents[selectedComponent];\n if (component) {\n component.traverse(child => {\n if (child.material) {\n child.material.emissive.setHex(0x000000);\n }\n });\n }\n }\n \n \/\/ Reset buttons\n document.querySelectorAll('.component-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n \n selectedComponent = null;\n };\n\n window.explodeView = function() {\n exploded = !exploded;\n Object.keys(robotComponents).forEach((key, index) => {\n const component = robotComponents[key];\n if (exploded) {\n const angle = (index \/ Object.keys(robotComponents).length) * Math.PI * 2;\n const distance = 6;\n component.position.x = Math.cos(angle) * distance;\n component.position.z = Math.sin(angle) * distance;\n component.position.y = 2 + index * 1;\n } else {\n resetPositions();\n }\n });\n };\n\n window.resetView = function() {\n exploded = false;\n resetPositions();\n hideComponent();\n };\n\n window.randomColors = function() {\n const colors = [0xff6b35, 0x00d4ff, 0x50fa7b, 0xbd93f9, 0xffaa00, 0xff4444, 0x00ffaa, 0x8844aa];\n Object.values(robotComponents).forEach(component => {\n const randomColor = colors[Math.floor(Math.random() * colors.length)];\n component.traverse(child => {\n if (child.material) {\n child.material.color.setHex(randomColor);\n }\n });\n });\n };\n\n function resetPositions() {\n robotComponents.chassis.position.set(0, 0.5, 0);\n robotComponents.motors.position.set(0, 0, 0);\n robotComponents.wheels.position.set(0, 0, 0);\n robotComponents.sensors.position.set(0, 0, 0);\n robotComponents.battery.position.set(0, 0.4, -1.5);\n robotComponents.controller.position.set(0, 1.2, 0);\n robotComponents.camera.position.set(0, 1.8, 2.8);\n robotComponents.arm.position.set(0, 0, 0);\n robotComponents.antenna.position.set(-1, 2.5, -2);\n }\n\n \/\/ Mouse controls\n document.addEventListener('mousemove', (event) => {\n mouseX = (event.clientX \/ window.innerWidth) * 2 - 1;\n mouseY = -(event.clientY \/ window.innerHeight) * 2 + 1;\n });\n\n document.addEventListener('wheel', (event) => {\n cameraDistance += event.deltaY * 0.01;\n cameraDistance = Math.max(5, Math.min(25, cameraDistance));\n });\n\n \/\/ Animation loop\n let time = 0;\n function animate() {\n requestAnimationFrame(animate);\n time += 0.01;\n\n \/\/ Camera orbit\n cameraAngle += 0.005;\n camera.position.x = Math.cos(cameraAngle + mouseX * 0.5) * cameraDistance;\n camera.position.z = Math.sin(cameraAngle + mouseX * 0.5) * cameraDistance;\n camera.position.y = 8 + mouseY * 3;\n camera.lookAt(0, 2, 0);\n\n \/\/ Animate selected component\n if (selectedComponent && robotComponents[selectedComponent]) {\n const component = robotComponents[selectedComponent];\n component.rotation.y = time * 0.5;\n }\n\n renderer.render(scene, camera);\n }\n\n \/\/ Handle window resize\n window.addEventListener('resize', () => {\n camera.aspect = window.innerWidth \/ window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n });\n\n \/\/ Start animation\n animate();\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Robot Assembly Workshop \ud83e\udd16 Robot Components Chassis Motors Wheels Sensors Battery Controller Camera Robot Arm Antenna \u00d7 Component Name \ud83d\ude80 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-400","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages\/400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/comments?post=400"}],"version-history":[{"count":4,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages\/400\/revisions"}],"predecessor-version":[{"id":405,"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/pages\/400\/revisions\/405"}],"wp:attachment":[{"href":"https:\/\/enthira.mo.vc\/index.php\/wp-json\/wp\/v2\/media?parent=400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}