recherche

Maison  >  Questions et réponses  >  le corps du texte

3. Le modèle JS 3D a été ajouté mais n'est pas visible

J'essaie d'ajouter des modèles 3D à mon site Web. J'utilise trois .js. J'ai tout essayé mais je n'ai pas réussi à rendre visible le modèle 3D. Dans l'onglet Réseau des Outils de développement, je vois que les fichiers MTL et OBJ sont chargés, mais la page est juste vide. J'ai essayé 3 modèles 3D différents mais le même problème persiste. Je fournirai toute aide. 

<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粉593536104262 Il y a quelques jours427

répondre à tous(1)je répondrai

  • P粉176151589

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

    En changeant le CDN des fichiers par le CDN UNPKG plus moderne, en chargeant tous les two.js fichiers à partir de là et en chargeant le modèle 3D à partir de l'URL que vous avez collée dans le commentaire, j'ai pu charger les fichiers avec succès. J'ai également ajusté la position de l'objet à -5 et l'échelle à 0,05. Voici le code qui a fonctionné pour moi : 

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

    Voici ce que je vois dans mon navigateur :

    répondre
    0
  • Annulerrépondre