Currently, I am encountering a challenge while exporting a basic scene from Blender to Three.js. Apart from the ongoing struggle with the texture not displaying properly, I have discovered an odd issue with the positioning of objects. The image below showcases how it appears in Blender:
https://i.sstatic.net/rbuj1.jpg
However, when rendered in Three.js, it looks like this:
https://i.sstatic.net/y6gdb.jpg
It is evident that the elements are overlapping each other, and the skybox texture is missing despite being correctly referenced in the json file which includes it as a base64 image. The tools being used are Three.js exporter v 1.5.0, three.js v84, and Blender v 2.77.
Below is my configuration:
https://i.sstatic.net/KbJAM.jpg
Furthermore, here is the code snippet for loading the scene:
var loader = new THREE.ObjectLoader();
loader.load(
'../dist/landscape.json',
function (obj) {
scene.add(obj)
}
);
While aware that I am adding a scene to another scene using this approach, I attempted to extract children by adjusting the code:
loader.load(
'../dist/landscape.json',
function (obj) {
obj.children.forEach(function(elem) {
scene.add(elem)
});
}
);
Unfortunately, implementing this method only displays half of the objects, without any clear reason why. Additionally, the objects continue to overlap in the rendering. After comparing the positions between the result and the original values in Blender, I noticed differences beyond the standard y/z axis swap – x values were reversed (though not causing the problem), and the rotation of the bridge was removed, resulting in it rendering upside down. This discrepancy has left me perplexed.
To further investigate, attached are the .blend and .json files:
UPDATE: A partial solution was identified – the scale was set to 10 during export, leading to the objects appearing misplaced. However, there are still issues with rotation and alignment compared to the original model. See the updated image here: