Saya cuba menambah model 3D pada tapak web saya. Saya menggunakan tiga .js. Saya mencuba segala-galanya tetapi tidak dapat membuat model 3D kelihatan. Dalam tab Rangkaian Alat Pembangun, saya dapat melihat bahawa fail MTL dan OBJ dimuatkan, tetapi halaman itu hanya kosong. Saya mencuba 3 model 3D yang berbeza tetapi masalah yang sama berterusan. Saya akan memberikan sebarang bantuan.
<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] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dengan menukar CDN fail kepada CDN UNPKG yang lebih moden, memuatkan semua
two.jsfail dari sana, dan memuatkan model 3D daripada URL yang anda tampalkan pada ulasan, saya berjaya memuatkan fail tersebut. Saya juga melaraskan kedudukan objek kepada -5 dan skala kepada 0.05. Berikut ialah kod yang berkesan untuk saya:<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>Ini yang saya lihat dalam pelayar saya: