I'm looking to make modifications to the code within a 3D map that was created using qgis2threejs, which is QGIS's plugin for creating 3D webmaps.
Although I don't have much experience with the threejs library or JavaScript, I want to alter the following code:
// load the scene
app.loadJSONFile(
"./data/index/scene.json",
function () {
app.start();
// North arrow inset
if (Q3D.Config.northArrow.visible) app.buildNorthArrow(document.getElementById("northarrow"), app.scene.userData.rotation);
}
);
My goal is to include scene.json directly instead of specifying its path. So, I intend to use this updated code:
// load the scene
app.loadJSONFile(
{"type": "scene", "properties": {"height": 90.1010101010101, "width": 100.0, "baseExtent": [725282.3732700318, 6006086.588087205, 727901.7482727035, 6008446.671422945], "crs": "EPSG:3857", "proj": "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs", "rotation": 0, "wgs84Center": {"lat": 47.39790958284822, "lon": 6.527087535108197}, "zExaggeration": 1.0, "zShift": 0.0}, "layers": [{"type": "layer", "id": 0, "properties": {"name": "clip_dtm_francia_eudem", "queryable": 1, "visible": true, "type": "dem", "shading": true}, "data": [{"type": "block", "layer": 0, "block": 0, "grid": {"width": 211, "height": 190, "url": "./data/index/a0.bin"}, "width": 100.0, "height": 90.1010101010101, "translate": [0.0, 0.0, 0.0], "zShift": 0.0, "zScale": 0.038177046012121664, "material": {"type": 0, "image": {"url": "./data/index/a0.png"}, "ds": 1}, "sides": true}]}]},
function () {
app.start();
// North arrow inset
if (Q3D.Config.northArrow.visible) app.buildNorthArrow(document.getElementById("northarrow"), app.scene.userData.rotation);
}
);
After implementing these changes, the 3D map appears blank even though there are no errors in the Chrome Developers tool.
How can I resolve this issue? If you'd like to review all the code, you can download it here(2MB)