我正在尝试将 3D 模型添加到我的网站。我正在使用三个.js。我尽了一切努力，但无法使 3D 模型可见。在开发者工具的网络选项卡中，我可以看到 MTL 和 OBJ 文件已加载，但页面只是空白。我尝试了 3 个不同的 3D 模型，但同样的问题仍然存在。我会提供任何帮助。
<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> 
通过将文件的 CDN 更改为更现代的 UNPKG CDN，从那里加载所有
two.js文件，并从您粘贴在评论上的 URL 加载 3D 模型，我能够成功加载文件。我还将对象的位置调整为 -5，将比例调整为 0.05。这是对我有用的代码：<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>这是我在浏览器中看到的内容：