I'm trying to add a 3D model to my website. I'm using three .js. I tried everything but couldn't make the 3D model visible. In the Network tab of the Developer Tools, I can see that the MTL and OBJ files are loaded, but the page is just blank. I tried 3 different 3D models but the same problem persists. I'll provide any help.
<html>
<head>
<title>3D Model</title>
<style>
html, body {
margin: 0;
background-color: white;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script src="/js/OrbitControls.js"></script>
<script src="/js/OBJLoader.js"></script>
<script src="/js/MTLLoader.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xeeeeee); // Light gray background color
document.body.appendChild(renderer.domElement);
const light = new THREE.AmbientLight(0x404040);
scene.add(light);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
var MTLLoader = new THREE.MTLLoader();
MTLLoader.setPath("/models/Silivri001/");
MTLLoader.load("odm_textured_model_geo.mtl", function(material) {
material.preload();
// Set the path for the OBJLoader
var OBJLoader = new THREE.OBJLoader();
OBJLoader.setMaterials(material);
OBJLoader.setPath("/models/Silivri001/"); // Set the correct path here
OBJLoader.load("odm_textured_model_geo.obj", function(object) {
object.position.set(0, -60, 0); // Adjust the values as needed
object.scale.set(0.1, 0.1, 0.1)
scene.add(object);
});
});
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
By changing the CDN for the files to the more modern UNPKG CDN, loading all
two.jsfiles from there, and loading the 3D model from the URL you pasted on the comment, I was able to successfully load the files. I also adjusted the object's position to -5 and scale to 0.05. This is the code that worked for me:<html> <head> <title>3D Model</title> <style> html, body { margin: 0; background-color: white; overflow: hidden; } </style> </head> <body> <script src="https://unpkg.com/three@0.147.0/build/three.min.js"></script> <script src="https://unpkg.com/three@0.147.0/examples/js/controls/OrbitControls.js"></script> <script src="https://unpkg.com/three@0.147.0/examples/js/loaders/OBJLoader.js"></script> <script src="https://unpkg.com/three@0.147.0/examples/js/loaders/MTLLoader.js"></script> <script> const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 10000); camera.position.set(0, 0, 5); camera.lookAt(scene.position); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xeeeeee); // Light gray background color document.body.appendChild(renderer.domElement); const light = new THREE.AmbientLight(); scene.add(light); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(1, 1, 1).normalize(); scene.add(directionalLight); const controls = new THREE.OrbitControls(camera, renderer.domElement); var MTLLoader = new THREE.MTLLoader(); MTLLoader.load("https://elipptic5g.com/models/Silivri001/odm_textured_model_geo.mtl", function (material) { material.preload(); console.log(material) // Set the path for the OBJLoader var OBJLoader = new THREE.OBJLoader(); OBJLoader.setMaterials(material); OBJLoader.load("https://elipptic5g.com/models/Silivri001/odm_textured_model_geo.obj", function (object) { object.position.set(0, -5, 0); // Adjust the values as needed object.scale.set(0.05, 0.05, 0.05) object.rotation.x = -Math.PI / 2; console.log(object) scene.add(object); }); }); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); </script> </body> </html>This is what I see in the browser: