javascript - Create a GLTF file from scratch using js - Stack Overflow

admin管理员组

文章数量:1277896

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 ?

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 ?

• javascript
• html
• gltf

Share Improve this question Follow asked Aug 14, 2018 at 13:49 A bouA bou 7322 silver badges44 bronze badges 5

• Do some research into three.js – Isaac Abramowitz Commented Aug 14, 2018 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 Commented Aug 14, 2018 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 Commented Aug 14, 2018 at 21:24
• 1 Actually, this might be what you need: npmjs./package/gltf-js-utils – Don McCurdy Commented Aug 15, 2018 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 Commented Aug 17, 2018 at 19:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

If you're able to create a mesh or scene in three.js, you can export using THREE.GLTFExporter. For plex 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/glTF-Validator/ or http://gltf-viewer.donmccurdy./) and filing bugs on the tools if they're not working properly.

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./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
];

本文标签： javascriptCreate a GLTF file from scratch using jsStack Overflow