搜索

首页  >  问答  >  正文

三.JS 3D模型已添加但不可见

我正在尝试将 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>

P粉593536104P粉593536104232 天前382

全部回复(1)我来回复

  • P粉176151589

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

    通过将文件的 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>

    这是我在浏览器中看到的内容：

    回复
    0
  • 取消回复