J'essaie d'ajouter des modèles 3D à mon site Web. J'utilise trois .js. J'ai tout essayé mais je n'ai pas réussi à rendre visible le modèle 3D. Dans l'onglet Réseau des Outils de développement, je vois que les fichiers MTL et OBJ sont chargés, mais la page est juste vide. J'ai essayé 3 modèles 3D différents mais le même problème persiste. Je fournirai toute aide.
<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] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
En changeant le CDN des fichiers par le CDN UNPKG plus moderne, en chargeant tous les
two.jsfichiers à partir de là et en chargeant le modèle 3D à partir de l'URL que vous avez collée dans le commentaire, j'ai pu charger les fichiers avec succès. J'ai également ajusté la position de l'objet à -5 et l'échelle à 0,05. Voici le code qui a fonctionné pour moi :<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>Voici ce que je vois dans mon navigateur :