How to load mtl file and textures from different urls

Questions
, , ,
1

Hi I put this question on stackoverflow as well.

So this problem might sound a little odd, let me explain. I am using the Roblox API to get the OBJ file, the MTL file and the Texture file. So the base api with the info is this https://t2.rbxcdn.com/ef63c826300347dde39b499e56bc874b and from that you get two important urls the obj file https://t4.rbxcdn.com/4844b24bb4b6696ccbafda0c79d2c406 and the mtl file https://t1.rbxcdn.com/58f8c8dfcad7ad36d17e1773a698223e, the problem is the MTL file is loaded from the subdomain t1, whereas the texture is loaded from https://t0.rbxcdn.com/21e00b04dc20ddc07659af859d4c1eaa with the subdomain t0. Now here is where it gets tricky:

Here is the ThreeJs obj loader:

mtlLoader.load('https://t1.rbxcdn.com/58f8c8dfcad7ad36d17e1773a698223e', async (mtl) => {
    await mtl.preload();
    const objLoader = new THREE.OBJLoader();
    objLoader2.load('https://t4.rbxcdn.com/4844b24bb4b6696ccbafda0c79d2c406', (root) => {
        scene.add(root);
        root.children[0].material.transparent = false

        function init() {
            requestAnimationFrame(init)
            root.rotateY(0.03)
            renderer.render(scene, camera);
        }
        init()
    });
    await objLoader2.setMaterials(mtl);
});

The MTL loader tries to load the texture as https://t1.rbxcdn.com/21e00b04dc20ddc07659af859d4c1eaa, however as I stated above the subdomain for the texture is t0 and not t1 so how do I change the subdomain between the MTL file and the textures.

Here is the full html file

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js">
  </script>
  <script src="https://threejs.org/examples/js/loaders/OBJLoader.js">
  </script>
  <script src="https://threejs.org/examples/js/loaders/MTLLoader.js">
  </script>
  <script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    const renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0xffffff, 1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    let root2

    const mtlLoader = new THREE.MTLLoader();
    const objLoader2 = new THREE.OBJLoader();

    mtlLoader.load('https://t1.rbxcdn.com/58f8c8dfcad7ad36d17e1773a698223e', async(mtl) => {
      await mtl.preload();
      const objLoader = new THREE.OBJLoader();
      objLoader2.load('https://t4.rbxcdn.com/4844b24bb4b6696ccbafda0c79d2c406', (root) => {
        scene.add(root);
        console.log(root)
        root.children[0].material.transparent = false

        function init() {
          requestAnimationFrame(init)
          root.rotateY(0.03)
          renderer.render(scene, camera);
        }
        init()
      });
      await objLoader2.setMaterials(mtl);

    });


    const color = 0xFFFFFF;
    const intensity = 0.5;
    const light = new THREE.AmbientLight(color, intensity);
    scene.add(light);
    camera.position.set(0, 103, -5)
    camera.rotateY(-180 * Math.PI / 180)

    const light2 = new THREE.PointLight(0xffffff, 2, 1000, 100);

    light2.position.set(0, 110, -5);
    light2.lookAt(new THREE.Vector3(0, 103, -5))
    scene.add(light2);
  </script>
</body>

</html>
2

I don’t understand how your post is related to the title. I mean you mentioned BufferGeometryUtils not a single time in your post.

Try it with setResourcePath():

Live example: Edit fiddle - JSFiddle - Code Playground

BTW: Please never import library files from different releases. Right now, you are importing three.js from r110 but the loaders from the latest release. This can easily lead to undefined behavior.

3

Thanks, sorry I put the wrong title on the wrong post the title should have been “How to load mtl file and textures from different urls”. After implementing those fixes it all appears to be working.

1 Like