Kinetik/viewer.html at main · EnesYilmazcode/Kinetik · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kinetik Viewer</title>
    <style>
        body { margin: 0; background: #0a0a14; overflow: hidden; font-family: monospace; }
        #info {
            position: absolute; top: 10px; left: 10px; color: #a78bfa;
            background: rgba(0,0,0,0.7); padding: 10px 16px; border-radius: 6px;
            font-size: 14px; z-index: 10;
        }
        #drop-zone {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            color: #666; font-size: 20px; text-align: center; z-index: 10;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="info">Kinetik Viewer — drag & drop a .bvh file or it auto-loads silly_dance.bvh</div>
    <div id="drop-zone">Drop a .bvh file here<br><br><small>or wait for auto-load...</small></div>

    <script type="importmap">
    {
        "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
        }
    }
    </script>
    <script type="module">
        import * as THREE from 'three';
        import { BVHLoader } from 'three/addons/loaders/BVHLoader.js';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x0a0a14);

        const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 150, 300);

        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.target.set(0, 100, 0);
        controls.update();

        // Grid floor
        const grid = new THREE.GridHelper(500, 20, 0x333355, 0x222244);
        scene.add(grid);

        // Lights
        scene.add(new THREE.AmbientLight(0x404060, 2));
        const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
        dirLight.position.set(100, 200, 100);
        scene.add(dirLight);

        let mixer = null;
        const clock = new THREE.Clock();

        function loadBVH(text) {
            document.getElementById('drop-zone').style.display = 'none';

            // Clear previous
            scene.children.forEach(child => {
                if (child.type === 'SkeletonHelper' || child.type === 'Bone') {
                    scene.remove(child);
                }
            });

            const loader = new BVHLoader();
            const result = loader.parse(text);

            const skeletonHelper = new THREE.SkeletonHelper(result.skeleton.bones[0]);
            // linewidth >1 not supported in WebGL
            skeletonHelper.material.color = new THREE.Color(0xa78bfa);
            scene.add(result.skeleton.bones[0]);
            scene.add(skeletonHelper);

            mixer = new THREE.AnimationMixer(result.skeleton.bones[0]);
            const action = mixer.clipAction(result.clip);
            action.play();

            document.getElementById('info').textContent =
                `Kinetik Viewer — ${result.skeleton.bones.length} bones, ${result.clip.duration.toFixed(1)}s`;
        }

        // Auto-load silly_dance.bvh
        fetch('assets/motions/silly_dance.bvh')
            .then(r => { if (r.ok) return r.text(); throw new Error('not found'); })
            .then(text => loadBVH(text))
            .catch(() => console.log('No silly_dance.bvh found, drag & drop a file'));

        // Drag & drop
        document.addEventListener('dragover', e => e.preventDefault());
        document.addEventListener('drop', e => {
            e.preventDefault();
            const file = e.dataTransfer.files[0];
            if (file && file.name.endsWith('.bvh')) {
                file.text().then(text => loadBVH(text));
            }
        });

        function animate() {
            requestAnimationFrame(animate);
            if (mixer) mixer.update(clock.getDelta());
            renderer.render(scene, camera);
        }
        animate();

        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>