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>