为什么我似乎无法导入 Three.js 的 OBJLoader 模块？

Question

我已经被这个问题困扰了好几天了。我似乎无法为 Three.js 导入 OBJLoader。这显然很重要，因为我想在我的游戏中使用自定义 3D 模型。

---

我有两个错误消息：

未捕获的类型错误：无法解析模块说明符“三对象加载器”。相对引用必须以“/”、“./”或“../”开头。

和

无法加载资源：服务器响应状态为 404（未找到）

---

import {OBJLoader} from 'three-obj-loader'

// load a resource
loader.load(

    // resource URL
    '/Users/dmitri/Desktop/flame/models/fresh_fire_01 (1).obj',
    // called when resource is loaded
    function ( object ) {

        scene.add( object );
    },

    // called when loading is in progresses
    function ( xhr ) {

        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    },

    // called when loading has errors
    function ( error ) {

        console.log( 'An error happened' );
    }
);

// const loader = new OBJLoader()
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff)

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// loader.load("/Users/dmitri/Desktop/flame/models/fresh_fire_01
(1).obj",
function(object){
    //     scene.add(object)
    // })

    var run = function() {
    requestAnimationFrame(run);
    renderer.render(scene, camera)
}
run()

这是我的 HTML 代码：

import {OBJLoader} from 'three-obj-loader'

// load a resource
loader.load(

    // resource URL
    '/Users/dmitri/Desktop/flame/models/fresh_fire_01 (1).obj',
    // called when resource is loaded
    function ( object ) {

        scene.add( object );
    },

    // called when loading is in progresses
    function ( xhr ) {

        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    },

    // called when loading has errors
    function ( error ) {

        console.log( 'An error happened' );
    }
);

// const loader = new OBJLoader()
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff)

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// loader.load("/Users/dmitri/Desktop/flame/models/fresh_fire_01
(1).obj",
function(object){
    //     scene.add(object)
    // })

    var run = function() {
    requestAnimationFrame(run);
    renderer.render(scene, camera)
}
run()

这是我的app.js源代码：

const express = require("express");
var app = express();

app.set("port", process.env.PORT || 8080)

app.use(express.static("public"))

app.listen(app.get("port"), function() {
    return
})

这是我的文件结构：

---

楷模

--fresh-fire-01 (1).obj

民众

--index.html

--script.js

应用程序.py

---

我已经尝试了所有我能想到的解决方案。我将 OBJLoader 的源代码放在我的目录中。我需要它。我什至将 OBJLoader 源代码放入script.js源代码中。似乎什么都不起作用。

Answer 1

Three.js 有自己的 OBJLoader。最好使用本机加载器而不是第三方。如果您查看“三个对象加载器”，您会发现它已经过时了。上次更新是 4 年前。因此，尝试从 Three.js 库导入 OBJLoader

改变：

import {OBJLoader} from 'three-obj-loader'

到：

import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader.js'