5

I have some vertices and faces data just simple x,y,z coordinate Like this :

var vertices = [1,0,1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,1,0,1,0]
var triangles = [0,1,2,2,3,0,4,5,1,1,0,4,6,7,5,5,4,6,3,2,7,7,6,3,7,1,5,7,2,1,4,0,6,0,3,6]

Is it possible to create a gltf file from just those information's ?

A bou
  • 53
  • 2
  • 4
  • Do some research into `three.js` – Isaac Abramowitz Aug 14 '18 at 14:05
  • I already used threejs and worked as expected,but i need a pure javascript way to create buffers and accessor using those data – A bou Aug 14 '18 at 14:26
  • If you can create a mesh in threejs, you can export using GLTFExporter. I’m not aware of a pure-JS exporter, but if you read the glTF spec a bit it shouldn’t be impractical to write from scratch. – Don McCurdy Aug 14 '18 at 21:24
  • 1
    Actually, this might be what you need: https://www.npmjs.com/package/gltf-js-utils – Don McCurdy Aug 15 '18 at 18:37
  • @DonMcCurdy thank you that was very helpful for me can you post it as an answer so i can close the question – A bou Aug 17 '18 at 19:57

2 Answers2

10

If you're able to create a mesh or scene in three.js, you can export using THREE.GLTFExporter. For complex models this is probably the easiest JavaScript-only solution. To create a model without using a full 3D library/engine, try gltf-transform or gltf-js-utils as shown below.

gltf-transform

import { Document, WebIO } from '@gltf-transform/core';

const doc = new Document();

const buffer = doc.createBuffer();

const position = doc.createAccessor()
  .setType('VEC3')
  .setArray(new Float32Array(vertices))
  .setBuffer(buffer);
const indices = doc.createAccessor()
  .setType('SCALAR')
  .setArray(new Uint16Array(triangles))
  .setBuffer(buffer);

const prim = doc.createPrimitive()
  .setAttribute('POSITION', position)
  .setIndices(indices);

const mesh = doc.createMesh().addPrimitive(prim);
const node = doc.createNode().setMesh(mesh);
const scene = doc.createScene().addChild(node);

const glb = await new WebIO().writeBinary(doc); // → Uint8Array (.glb)

gltf-js-utils

const asset = new GLTFUtils.GLTFAsset();
const scene = new GLTFUtils.Scene();
asset.addScene(scene);

const node = new GLTFUtils.Node();
scene.addNode(node);

const vertices = [];
for (let i = 0; i < vertices.length; i += 3) {
  const vertex = new GLTFUtils.Vertex();
  vertex.x = vertices[i];
  vertex.y = vertices[i + 1];
  vertex.z = vertices[i + 2];
  vertices.push(vertex);
}

const mesh = new GLTFUtils.Mesh();
mesh.material = [new GLTFUtils.Material()];
for (let i = 0; i < triangles.length; i += 3) {
  const v1 = vertices[triangles[i]];
  const v2 = vertices[triangles[i + 1]];
  const v3 = vertices[triangles[i + 2]];
  mesh.addFace(v1, v2, v3, {r: 1, g: 1, b: 1}, 0);
}
node.mesh = mesh;

const object = GLTFUtils.exportGLTF(asset, {
  bufferOutputType: GLTFUtils.BufferOutputType.DataURI,
  imageOutputType: GLTFUtils.BufferOutputType.DataURI,
});

In either case, consider checking that your model was created correctly (with http://github.khronos.org/glTF-Validator/ or http://gltf-viewer.donmccurdy.com/) and filing bugs on the tools if they're not working properly.

Don McCurdy
  • 10,975
  • 2
  • 37
  • 75
  • Is it possible to set that texture wint gltf-js-utils on nodejs? I see it only allow to apply HTMLImageTag – SiarheiK Apr 29 '21 at 14:26
  • 2
    Answered further in https://stackoverflow.com/questions/67319460/gltf-js-utils-set-texture-in-node-js/67320885#67320885. It looks like gltf-js-utils is not designed to work in node.js, you'd need to report a feature request to them. The first solution (with gltf-transform) will work both on the web and in node.js. – Don McCurdy Apr 29 '21 at 15:52
  • gltf-transform has more complicated API :( wanted js-utils – SiarheiK Apr 29 '21 at 16:41
  • 1
    This glTF-transform is the first example I've seen that got me to generating a cube in a viewable file. I haven't been able to find another "minimal" example. – MotoRidingMelon Sep 25 '22 at 19:05
0

I just wanted to add that the vertices/indices provided in the initial question produce a strange inside-out cube. I copied the vertices/indices from this sample https://gist.github.com/Mjiig/1953122#file-cube-c-L135 to create a normal looking cube.

const vertices = [
  // front
  -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,
  // back
  -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0
];

const indices = [
  // front
  0, 1, 2, 2, 3, 0,
  // top
  1, 5, 6, 6, 2, 1,
  // back
  7, 6, 5, 5, 4, 7,
  // bottom
  4, 0, 3, 3, 7, 4,
  // left
  4, 5, 1, 1, 0, 4,
  // right
  3, 2, 6, 6, 7, 3
];
user2025261
  • 155
  • 7