Babylon.js cannot export due to Newtonsoft.Json

Questions
21

Seems to line up on my end too. I can see the file in some gltf viewers online. but it doesn’t at all appear on my webpage. Curious, why four materials? I think I saw three in the viewer. Do you want a copy of the validation report from the gltf viewer I use if that by any chance may help?

22

oh, I think one of the materials is created by Babylon.js sandbox for the Skybox. Also, it seems the validation issue is related to tangents, I think the exporter is creating tangent data with value (0,0,0). Can you check if unchecking “Export tangents” creates a valid model for you? The one I get with that option does not have any validation errors.

23

I did indeed try that out (unchecking “export tangents”). The model still doesn’t load on three.js. This is what I get when I check its validation report.

validation (no tangents)
validation (no tangents)1148×775 130 KB

24

This message is showing a warning because the model has Uv data but there are no textures, so the UV data will be useless. I don’t think this is what is causing the issue.

However, the model also uses 32bit integer for index buffers of one mesh (a mesh that has more than 65535 vertices) but it stores them at the same buffer view as other meshes index buffers that are stored as 16bit integers. I wounder if three.js is having a problem parsing those.

25

does not seem to be the case. I deleted the mesh that had the high vertices count and the rest still does not show in three.js.

26

I’ve fixed the issue for tangents. The PR is already merged and there is a new version of the exporter already out.

PR: Add check for invalid tangent data in Maya by SergioRZMasson · Pull Request #1132 · BabylonJS/Exporters

Release: Release CD Release 20250127.3 · BabylonJS/Exporters

It seems the GLB generated from your file now passes the validation from the GLTF validator. Since we don’t know what three.js is doing I think it will be hard to know why it is not rendering it.

27

Hmmm. Could it be a code issue on my end?

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

let camera, scene, renderer, cube, capsule;
//let arrayCapsules = [];
//let loadCapsules = [];

function init() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor( 0xffffff, 0);
document.body.appendChild(renderer.domElement);

const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(4, 5, 5);
scene.add(directionalLight);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const loader = new GLTFLoader();

loader.load( '../three.js/models/capsule_1.glb', function ( gltf ) {
capsule = gltf.scene;
capsule.scale.set(1.5, 1.5, 1.5);
scene.add(capsule);
}, undefined, function ( error ) {
   console.error( error );
} );

camera.position.z = 5;
}


function animate() {
requestAnimationFrame(animate);


renderer.render(scene, camera);
}

function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onWindowResize, false);

init();
animate();

From what I can tell, this is basic way to load in a model, no? I did try using Verge3d, but that loaded the model and not the materials, so the path and the file name is correct. Is there any basics here I am screwing up?

28

Unfortunately as you can imagine we are not three.js expert :smiley:

29

Well, that is a bummer. Thanks for the help anyways!

1 Like
30

Why not using Babylon, we could help you with this :wink:

2 Likes