所以这个问题听起来可能有点奇怪，让我来解释一下。我正在使用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加载的，而纹理是从具有子域t0的https://t0.rbxcdn.com/21e00b04dc20ddc07659af859d4c1eaa加载的。现在这里是它变得棘手的地方：
这是ThreeJs对象加载器：
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>嗨，所以我解决了这个问题，我将把它留给其他需要它的人。这真是一个糟糕的答案。所以我进入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')