Something strange is happening with my Roblox API integration. I'm trying to retrieve the OBJ file, MTL file, and Texture file using the API. The main API link I have is
https://t2.rbxcdn.com/ef63c826300347dde39b499e56bc874bhttps://t4.rbxcdn.com/4844b24bb4b6696ccbafda0c79d2c406https://t1.rbxcdn.com/58f8c8dfcad7ad36d17e1773a698223et1, while the texture loads from https://t0.rbxcdn.com/21e00b04dc20ddc07659af859d4c1eaat0. Here's where it gets complicated:
Check out the ThreeJs obj loader below:
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 attempts to load the texture as
https://t1.rbxcdn.com/21e00b04dc20ddc07659af859d4c1eaat0 and not t1. How can I change the subdomain between the MTL file and the textures?
Here's the complete 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>