So im trying to have an a-frame scene exported using GLTFExporter, the export works but the models in the scene are not appearing correct on the new glb file. does anyone have any ideia what could be the problem?
This is my export code:
<script type="module">
import {
GLTFExporter
} from 'three/addons/exporters/GLTFExporter.js';
var btn = document.createElement('button');
document.body.appendChild(btn);
btn.textContent = 'Download .glb';
btn.onclick = download;
function download() {
let scene = document.getElementById("scene").object3D;
console.log(scene);
const exporter = new GLTFExporter();
exporter.parse(
scene,
function(result) {
saveArrayBuffer(result, 'scene.glb');
},
function(error) {
console.log('An error happened');
}, {
binary: true
}
);
}
function saveArrayBuffer(buffer, filename) {
save(new Blob([buffer], {
type: 'application/octet-stream'
}), filename);
}
const link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link); // Firefox workaround, see #6594
function save(blob, filename) {
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();
// URL.revokeObjectURL( url ); breaks Firefox...
}
</script>
This is the a-frame scene that i want to use to create the new glb:
<a-scene id="scene" embedded renderer="logarithmicDepthBuffer: true; antialias: true;" vr-mode-ui="enabled: false" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;">
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
this is the result, im using babylon.js to preview it:
