Skip to content

Instantly share code, notes, and snippets.

@manthrax
Created May 26, 2021 14:03
Show Gist options
  • Save manthrax/ce3639911ddeafd173dd1a03b7ecf749 to your computer and use it in GitHub Desktop.
Save manthrax/ce3639911ddeafd173dd1a03b7ecf749 to your computer and use it in GitHub Desktop.
Load json model in point/normal/uv format and export as .GLB
import * as THREE from 'https:/threejs.org/build/three.module.js'
import {GLTFExporter} from 'https:/threejs.org/examples/jsm/exporters/GLTFExporter.js'
fetch('./map.json').then(data=>data.json().then((js)=>{
console.log(js)
let g = new THREE.PlaneGeometry(1,1)
g.attributes.normal.array=new Float32Array(js.normal.length)
g.attributes.normal.array.set(js.normal)
g.attributes.normal.count = g.attributes.normal.array.length/3;
g.attributes.position.array=new Float32Array(js.position.length)
g.attributes.position.array.set(js.position)
g.attributes.position.count = g.attributes.position.array.length/3;
g.attributes.uv.array=new Float32Array(js.uv.length)
g.attributes.uv.array.set(js.uv)
g.attributes.uv.count = g.attributes.uv.array.length/2;
g.setIndex(null)
g.computeBoundingBox();
//let m = new THREE.Points(g,new THREE.PointsMaterial({color:'red'}));
let m = new THREE.Mesh(g,new THREE.MeshStandardMaterial({color:'grey',side:THREE.DoubleSide,roughness:.8,metalness:0}));
m.scale.multiplyScalar(10)
//m.layers.enable(1)
scene.add(m)
let exporter = new GLTFExporter()
exporter.parse( m, function ( gltf ) {
console.log( gltf );
const link = document.createElement( 'a' );
link.style.display = 'none';
document.body.appendChild( link );
const blob = new Blob( [ gltf ], { type: 'text/plain' } );
const objectURL = URL.createObjectURL( blob );
link.href = objectURL;
link.href = URL.createObjectURL( blob );
link.download = 'data.glb';
link.click();
}, {binary:true} );
}))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment