Three.js: Export SkinnedMesh with GTLFExporter

A base/starter fiddle for Three.js

by chrisphua

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>three.js webgl - exporter - gltf</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  </head>

  <body>
    <div style="position: fixed">
      <button id="export_gltf">GLTFExporter: Download GLTF</button>
      <button id="export_glb">GLTFExporter: Download GLB</button>
    </div>

  </body>

</html>

CSS

body {
    padding: 0;
    margin: 0;
}
canvas {
  display: block;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {
  OrbitControls
} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import {
  GLTFExporter
} from "https://threejs.org/examples/jsm/exporters/GLTFExporter.js";

var camera, scene, renderer, mesh;
init();
animate();

function init() {
  // Renderer.
  renderer = new THREE.WebGLRenderer();
  //renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  // Add renderer to page
  document.body.appendChild(renderer.domElement);

  // Create camera.
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.x = 0;
  camera.position.y = 6;
  camera.position.z = 35;

  // Create orbit.
  new OrbitControls(camera, renderer.domElement);

  // Create scene.
  scene = new THREE.Scene();

  const segmentHeight = 8;
  const segmentCount = 4;
  const height = segmentHeight * segmentCount;
  const halfHeight = height * 0.5;

  const sizing = {
    segmentHeight: segmentHeight,
    segmentCount: segmentCount,
    height: height,
    halfHeight: halfHeight,
  };

  const geometry = createGeometry(sizing);
  const bones = createBones(sizing);
  mesh = createMesh(geometry, bones);
  scene.add(mesh);
  camera.lookAt(mesh.position);

  // Create ambient light and add to scene.
  var light = new THREE.AmbientLight(0x404040); // soft white light
  scene.add(light);

  // Create directional light and add to scene.
  var directionalLight = new THREE.DirectionalLight(0xffffff);
  directionalLight.position.set(1, 1, 1).normalize();
  scene.add(directionalLight);

  // Add listener for window resize.
  window.addEventListener('resize', onWindowResize, false);
}

function animate() {
  requestAnimationFrame(animate);
  // mesh.rotation.x += 0.005;
  // mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
 ...