Example integrating with three.js

[aiden-jeffrey]

I'm looking for a nice way to take a GLTF file, and generate a low-resolution heightmap mesh of the whole scene, adding the resulting mesh back into the original GLTF file as an "append" operation (leaving all the other geometry untouched).

I have some code that generates that heightmap using three.js. I saw this discussion, which confirmed my suspicion that GLTFExporter was not the way to go.

Is there a nice way to use this tool in conjunction with three.js? I imagine I'd have to write a transform function that complies with the signature expected by Document.transform, but I'm struggling to find any examples that show how to convert from a three.js Mesh into your Mesh property.

[aiden-jeffrey]

Or is the way to go to use GLTFExporter to generate gltf containing only the new geometry, and then use Document.merge to combine them? Will that put the new geometry into a separate scene? It doesn't look like three.js supports multiple scenes https://threejs.org/docs/?q=gltf#examples/en/loaders/GLTFLoader.

[donmccurdy]

Hi! If the only change you're making to the original glTF file is adding a mesh, I think I'd load the three.js scene with THREE.GLTFLoader and load a glTF Transform Document with WebIO in parallel. Once you've got a THREE.Mesh you can add it to the Document like this:

import { Primitive } from '@gltf-transform/core';

const position = document.createAccessor()
  .setArray(geometry.attributes.position.array)
  .setType('VEC3');
const normal = document.createAccessor()
  .setArray(geometry.attributes.normal.array)
  .setType('VEC3');
const texcoord = document.createAccessor()
  .setArray(geometry.attributes.uv.array)
  .setType('VEC2');

const prim = document.createPrimitive()
  .setAttribute('POSITION', position)
  .setAttribute('NORMAL', normal)
  .setAttribute('TEXCOORD_0', texcoord)
  .setMode(Primitive.Mode.TRIANGLES);

const mesh = document.createMesh('HeightfieldMesh')
  .addPrimitive(prim);

const node = document.createNode('HeightfieldNode')
  .setMesh(mesh);

const scene = document.getRoot().listScenes()[0];
scene.addChild(node);

The mesh isn't required to have a material, but you could also include one using the Material API. If the mesh attributes happen to be normalized (this is less common in meshes created with three.js) you'll need to set a few additional properties on the Accessors.

This approach should avoid any significant changes to the original file (other than adding the new mesh), and won't (for example) decompress and recompress your textures like THREE.GLTFExporter would.

If this is an iterative process and you need to avoid reloading with GLTFLoader repeatedly, gltf-transform/view might be helpful, but it's still pretty experimental.

[aiden-jeffrey]

Thanks so much! This is excellent.