Question

所以这个问题可能听起来有点奇怪，让我解释一下。我正在使用 Roblox API 来获取 OBJ 文件、MTL 文件和纹理文件。所以带有信息的基本api是这个https://t2.rbxcdn.com/ef63c826300347dde39b499e56bc874b，从中你得到两个重要的url，obj文件https://t4.rbxcdn.com/4844b24bb4b6696ccbafda0c79d2c406和mtl文件https://t1.rbxcdn.com/58f8c8dfcad7ad36d17e1773a698223e，问题是MTL文件是从子域 t1，而纹理从 https://t0.rbxcdn.com/21e00b04dc20ddc07659af859d4c1eaa 加载，子域为 t0。现在这就是棘手的地方：

这是 ThreeJs obj 加载器：

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);
});

MTL 加载器尝试将纹理加载为 https://t1.rbxcdn.com/21e00b04dc20ddc07659af859d4c1eaa，但是正如我上面所说，纹理的子域是 t0 而不是 t1 所以我如何更改MTL 文件和纹理。

这里是完整的html文件

<!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>

Answer 1

嗨，我解决了这个问题，我会把它留在这里给任何需要它的人。这真的是一个很老套的答案。于是我进入了 MTL 加载器，发现，

    loadTexture( url, mapping, onLoad, onProgress, onError ) {

            const manager = this.manager !== undefined ? this.manager : THREE.DefaultLoadingManager;
            let loader = manager.getHandler( url );

            if ( loader === null ) {

                loader = new THREE.TextureLoader( manager );

            }

            if ( loader.setCrossOrigin ) loader.setCrossOrigin( this.crossOrigin );
            const texture = loader.load( url, onLoad, onProgress, onError );
            if ( mapping !== undefined ) texture.mapping = mapping;
            return texture;

        }

在加载纹理下我刚刚添加

url = url.replace('t1','t0')

Threejs，从不同的url加载mtl文件和纹理

1 个答案: