我正在嘗試將 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>這是我在瀏覽器中看到的內容：