three.js - save indexed buffer geometry

by mmalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<button id="save" onclick="saveJson(document.mesh.geometry.toJSON(), 'mesh_indexed.json')">Save JSON</button>

CSS

body {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

#save {
  position: fixed;
  top: 12px;
  left: 24px;
}

JavaScript

var camera, scene, renderer, controls, mesh;

init();
animate();

function init() {

  scene = new THREE.Scene();

  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x555555, 1);
  renderer.sortObjects = true;

  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  scene.add(camera);

  camera.position.x = 20;
  camera.position.y = 20;
  camera.position.z = 20;

  // white spotlight shining from the side, casting a shadow

  let spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(1, 100, 2);

  spotLight.castShadow = true;

  spotLight.shadow.mapSize.width = 1024;
  spotLight.shadow.mapSize.height = 1024;

  spotLight.shadow.camera.near = 1;
  spotLight.shadow.camera.far = 1000;
  spotLight.shadow.camera.fov = 30;

  // assign light to layer#1
  scene.add(spotLight);

  controls = new THREE.OrbitControls(camera);

  let gridHelper = new THREE.GridHelper(100, 10);
  scene.add(gridHelper);

  // instantiate a loader
  var loader = new THREE.BufferGeometryLoader();

  // load a resource
  loader.load(
    // resource URL
    'http://mbnsay.com/rayys/assets/Box001.json',

    // onLoad callback
    function(geometry) {
      var material = new THREE.MeshLambertMaterial({
        color: 0xF5F5F5
      });
      var object = new THREE.Mesh(geometry, material);
      object.rotation.x = -Math.PI / 2;
      scene.add(object);
    },

    // onProgress callback
    function(xhr) {
      console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },

    // onError callback
    function(err) {
      console.log('An error happened');
    }
  );

  // 


  // Alternatively, to parse a previously loaded JSON structure
  // var object = loader.parse(a_json_object);

  // scene.add(object);

  // indexed...