THREE.JS OBJLoader 在加载图像时给出 'Unexpected line'

Question

我无法使用 OBJLoader 加载图像（JPG、PNG 或 BMP）。

下面是一些代码：

function init() {
  ...
  loader = new THREE.OBJLoader();
  loadOBJ();
}

function createLeeMaterial() {
    let leeTexture = new THREE.Texture();
    
    loader.load('lee/lee_diffuse.jpg', (image) => {
        leeTexture.image = image;
        leeTexture.needsUpdate = true;
    });
    
    let leeMaterial = new THREE.MeshPhongMaterial();
    leeMaterial.map = leeTexture;
    
    return leeMaterial;
}

function loadOBJ() {
    loader.load('lee/lee.obj', (object) => {
        object.traverse((child) => {
            if (child instanceof THREE.Mesh) {
                child.material = createLeeMaterial();
                child.receiveShadow = true;
                child.castShadow = true;
            }
        });
        
        object.position.y = -2;
        object.position.z = 10;
        scene.add(object);
    });
}

我可以加载 .obj，但不能加载 .jpg（它存在于文件夹中）。

我曾经遇到过与我使用的托管相关的问题：该网站似乎删除了特殊字符（如非 ASCII 字符）。也许这破坏了图像？

Answer 1

I can't load images (JPG, PNG, or BMP) with OBJLoader.

OBJLoader 只能处理 OBJ 项资产。如果你想加载纹理，这样做：

const textureLoader = new THREE.TextureLoader();
const leeTexture = textureLoader.load( 'lee/lee_diffuse.jpg' );

THREE.JS OBJLoader 在加载图像时给出 'Unexpected line'

THREE.JS OBJLoader giving 'Unexpected line' while loading images

three.js