简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
3. The JS 3D model has been added but is not visible
P粉593536104
P粉593536104 2024-04-03 19:06:13
0
1
359

I'm trying to add a 3D model to my website. I'm using three .js. I tried everything but couldn't make the 3D model visible. In the Network tab of the Developer Tools, I can see that the MTL and OBJ files are loaded, but the page is just blank. I tried 3 different 3D models but the same problem persists. I'll provide any help. 

<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粉593536104
P粉593536104

reply all(1)
P粉176151589
P粉1761515892024-04-04 16:36:34 1 floor

By changing the CDN for the files to the more modern UNPKG CDN, loading all two.js files from there, and loading the 3D model from the URL you pasted on the comment, I was able to successfully load the files. I also adjusted the object's position to -5 and scale to 0.05. This is the code that worked for me: 

<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>

This is what I see in the browser:

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！