OBJ with MTL import to Potree

Questions
1

Hello Guys I want to import an Object File with MTL but it just doesn’t work :-(.

Can you help me?

here is my code:

Potree Viewer 
<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">

<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
    <div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
    <div id="potree_sidebar_container"> </div>
</div>

<script type="module">
    import * as THREE from "../libs/three.js/build/three.module.js";
	import {MTLLoader} from "../libs/three.js/loaders/MTLLoader.js";
    import {OBJLoader} from "../libs/three.js/loaders/OBJLoader.js";

    window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));

    viewer.setEDLEnabled(true);
    viewer.setFOV(60);
    viewer.setPointBudget(1_000_000);
    viewer.loadSettingsFromURL();

    viewer.setDescription("Point cloud courtesy of <a target='_blank' href='https://www.sigeom.ch/'>sigeom sa</a>");

    viewer.loadGUI(() => {
        viewer.setLanguage('en');
        $("#menu_tools").next().show();
        $("#menu_scene").next().show();
        //viewer.toggleSidebar();
    });

    // Laden des OBJ-Modells
	{
		const mtlLoader = new MTLLoader();
		mtlLoader.load(`${Potree.resourcePath}/models/alte_Tuere_Stadtgarten/Tuere.mtl`, function (materials) {
			materials.preload();
			const objLoader = new OBJLoader();
			objLoader.setMaterials(materials);
			objLoader.load(`${Potree.resourcePath}/models/alte_Tuere_Stadtgarten/Tuere.obj`, function (object) {
				object.position.set(0.0, 0.0, 0.0);
				object.scale.multiplyScalar(1);
				object.rotation.set(0, 0, 0);
				viewer.scene.scene.add(object);

				viewer.onGUILoaded(() => {
					let tree = $(`#jstree_scene`);
					let parentNode = "other";

					let objectID = tree.jstree('create_node', parentNode, { 
							text: "Tuere", 
							icon: `${Potree.resourcePath}/icons/triangle.svg`,
							data: object
						}, 
						"last", false, false);
					tree.jstree(object.visible ? "check_node" : "uncheck_node", objectID);
				});
			});
		});

    // Lichter und andere Szene-Konfigurationen
    { 
        const directional = new THREE.DirectionalLight( 0xffffff, 1.0);
        directional.position.set( 10, 10, 10 );
        directional.lookAt(0, 0, 0);

        const ambient = new THREE.AmbientLight(0x555555);

        viewer.scene.scene.add(directional);
        viewer.scene.scene.add(ambient);
    }

</script>
2

What does the devtools console say in terms of errors?

3

console says this:

GET http://localhost:1234/build/three.module.js net::ERR_ABORTED 404 (Not Found)

but the Path is correct.

4

Ie. when you open http://localhost:1234/build/three.module.js in the browser you see three.js source code?

5

no but with http://localhost:1234/libs/three.js/build/three.module.js

6

Well, then the path is the one you’ve just listed, not the one your script is trying to fetch from :sweat_smile:

1 Like
7

i found out it works with with:

import * as THREE from “…/libs/three.js/build/three.module.js”;
import {OBJLoader} from “…/libs/three.js/loaders/OBJLoader.js”;

but as soon as i import also MTLLoader.js then i get the error!

import {MTLLoader} from “…/libs/three.js/loaders/MTLLoader.js”;

Thats strange!

8

Loaders (and most not-core stuff) are located in three/examples/jsm/... directory (full list here)

9

thanks i fixed it with this advice from: Problems loading MTL · Issue #1167 · potree/potree · GitHub

Do you know if there are any three or potree developers to develop an web-application for me?

I will pay for it :-).