使用 Three.js 时出现 .obj 网格的问题

Question

我有两个脚本，我想用它们在 Web 浏览器中使用 .mtl 文件和一组纹理文件来查看 .obj 文件及其纹理。我已成功加载纹理文件和模型，但网格显示为黑色。有人可以帮我解决这个问题吗？

查看.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>View 3D Model with Textures</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
    <script type="importmap">
        {
          "imports": {
            "three": "./node_modules/three/src/Three.js",
            "OrbitControls": "./node_modules/three/examples/jsm/controls/OrbitControls.js",
            "OBJLoader": "./node_modules/three/examples/jsm/loaders/OBJLoader.js",
            "MTLLoader": "./node_modules/three/examples/jsm/loaders/MTLLoader.js",
            "GLTFLoader": "./node_modules/three/examples/jsm/loaders/GLTFLoader.js"
          }
        }
    </script>
</head>
<body>
    <script src="script.js" type="module"></script>
</body>
</html>

脚本.js

import * as THREE from 'three';
import { MTLLoader } from 'MTLLoader';
import { OBJLoader } from 'OBJLoader';
import { OrbitControls } from 'OrbitControls';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x808080); // Set gray background color
document.body.appendChild(renderer.domElement);

// Load materials and mesh
const mtlLoader = new MTLLoader();
mtlLoader.load('House/v2/texturedMesh.mtl', function(materials) {
    materials.preload();
    const objLoader = new OBJLoader();
    objLoader.setMaterials(materials); // Set loaded materials directly to OBJLoader

    // Load OBJ file with materials
    objLoader.load('House/v2/texturedMesh.obj', function(object) {
        // Adjust scale and position of the loaded object if necessary
        object.scale.set(0.5, 0.5, 0.5); // Scale down if needed
        object.position.y = -1; // Adjust vertical position if needed
        scene.add(object);

        // Camera setup
        camera.position.set(0, 0, 5); // Position the camera
        camera.lookAt(scene.position); // Point camera at the center of the scene

        // Add lights to the scene
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Soft white ambient light
        scene.add(ambientLight);

        const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x404040, 1); // Sky color, ground color, intensity
        scene.add(hemisphereLight);

        // Orbit controls for camera interaction
        const controls = new OrbitControls(camera, renderer.domElement);

        // Render loop
        function animate() {
            requestAnimationFrame(animate);
            controls.update(); // Update controls
            renderer.render(scene, camera); // Render the scene
        }
        animate(); // Start animation loop
    });
});

// Handle window resize
window.addEventListener('resize', function() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

我尝试更改照明并检查材料是否正确加载（看起来似乎正在这样做）。我想使用 Three.js 在网络浏览器中查看 .obj 文件及其网格。

Answer 1

这是我使用的文件有问题。我使用了 .glb 而不是 .obj。

使用 Three.js 时出现 .obj 网格的问题

问题描述投票：0回答：1

1个回答

最新问题

使用 Three.js 时出现 .obj 网格的问题

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1