cari

Rumah  >  Soal Jawab  >  teks badan

3. Model JS 3D telah ditambahkan tetapi tidak kelihatan

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>

P粉593536104P粉593536104232 hari yang lalu383

membalas semua(1)saya akan balas

  • P粉176151589

    P粉1761515892024-04-04 16:36:34

    Dengan menukar CDN fail kepada CDN UNPKG yang lebih moden, memuatkan semua two.js ​​fail 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:

    balas
    0
  • Batalbalas