```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Snuggles Wolfy Robot Skeleton</title>
<style>
body {
margin: 0;
background-color: #1a1a1a;
color: #fff;
font-family: Arial, sans-serif;
overflow: hidden;
}
canvas {
display: block;
width: 100vw;
height: 100vh;
}
#info {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 8px;
z-index: 1;
}
</style>
</head>
<body>
<div id="info">
<h2>Snuggles Wolfy Robot Skeleton</h2>
<p>Articulated wolf-like skeleton with cable-driven movement (Bowden cables).</p>
<p>Designed for 3D printing on Ender3. External servos control motion via umbilical.</p>
</div>
<canvas id="skeletonCanvas"></canvas>
<script type="module">
import * as THREE from '
https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';
import { OrbitControls } from '
https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/controls/OrbitControls.js';
// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a1a);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 1.5, 3);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('skeletonCanvas'), antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 7.5);
scene.add(directionalLight);
// Helper functions to create bones
function createBone(length, radius = 0.05, color = 0xaaaaaa) {
const geometry = new THREE.CylinderGeometry(radius, radius, length, 16);
const material = new THREE.MeshStandardMaterial({ color });
const mesh = new THREE.Mesh(geometry, material);
return mesh;
}
// Bone structure of a wolf-like skeleton
const bones = {};
const boneLengths = {
spine: 0.4,
neck: 0.3,
head: 0.2,
upperLeg: 0.3,
lowerLeg: 0.25,
tailSegment: 0.15
};
// Spine
bones.spine = createBone(boneLengths.spine);
bones.spine.rotation.z = Math.PI / 2;
scene.add(bones.spine);
// Neck and head
bones.neck = createBone(boneLengths.neck);
bones.neck.position.y = boneLengths.spine / 2 + boneLengths.neck / 2;
bones.head = createBone(boneLengths.head);
bones.head.position.y = boneLengths.spine / 2 + boneLengths.neck + boneLengths.head / 2;
bones.spine.add(bones.neck);
bones.neck.add(bones.head);
// Legs
function addLeg(x, y, z, isFront) {
const upper = createBone(boneLengths.upperLeg, 0.04, 0x999999);
const lower = createBone(boneLengths.lowerLeg, 0.03, 0x888888);
upper.position.set(x, y, z);
lower.position.y = -boneLengths.upperLeg / 2 - boneLengths.lowerLeg / 2;
upper.add(lower);
scene.add(upper);
if (!isFront) {
upper.rotation.x = Math.PI;
}
return { upper, lower };
}
bones.legs = [];
bones.legs.push(addLeg(-0.2, 0, 0.1, true)); // Front left
bones.legs.push(addLeg( 0.2, 0, 0.1, true)); // Front right
bones.legs.push(addLeg(-0.2, 0, -0.2, false)); // Back left
bones.legs.push(addLeg( 0.2, 0, -0.2, false)); // Back right
// Tail
bones.tail = [];
const tailSegments = 5;
let prevTail = null;
for (let i = 0; i < tailSegments; i++) {
const segment = createBone(boneLengths.tailSegment, 0.03, 0x777777);
segment.rotation.z = Math.PI / 2;
if (prevTail) {
segment.position.y = -boneLengths.tailSegment;
prevTail.add(segment);
} else {
bones.spine.add(segment);
segment.position.y = -boneLengths.spine / 2 - boneLengths.tailSegment / 2;
}
bones.tail.push(segment);
prevTail = segment;
}
// Animation loop for subtle movement simulation
let clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const elapsed = clock.getElapsedTime();
// Simulate breathing or idle motion
const breatheAmplitude = 0.02;
bones.spine.scale.y = 1 + Math.sin(elapsed * 2) * breatheAmplitude;
// Leg movement simulation
bones.legs.forEach((leg, index) => {
const angle = Math.sin(elapsed + index) * 0.3;
leg.upper.rotation.z = angle;
leg.lower.rotation.z = -angle * 2;
});
// Tail sway
bones.tail.forEach((seg, i) => {
seg.rotation.z = Math.sin(elapsed + i * 0.5) * 0.3;
});
controls.update();
renderer.render(scene, camera);
}
animate();
// Handle resizing
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
```
