three.js的 OBJLoader.js在初始化时出错

前端开发 2026-07-09

我想搭建一个非常基础的场景，并在其中加载一个obj。然而，我一直收到这个错误：

Uncaught TypeError: The specifier “three” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”. OBJLoader.js:17:8

我不认为应该需要修改three.js库的底层代码，所以我猜这是环境设置出了问题。下面是我从一个基础教程那里得到的代码……我搞不清楚自己哪里做错了，因为我找到的每个教程基本上都和我现在做的一样。

HTML文件：

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <title>Three.js Learning Environment</title>

        <meta name="title"       content="Three.js Learning Environment" />
        <meta name="googlebot"   content="noindex" />
        <meta name="robots"      content="noindex" />

        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="pragma"        content="no-cache" />

        <style>
            #test-env {
                border:  1px solid #666; 
                margin:  auto; 
                padding: 0px;
            }
        </style>

    </head>
    <body>

        <canvas id="test-env" class="basic-canvas"></canvas>
        <script type="module" src="three-js-test.js"></script>

    </body>
</html>

JS文件（我已经在服务器上下载安装了最新版的three.js构建）：

import * as THREE from 'https://10.1.10.101/work-shop/three.js/build/three.module.js';
import { OrbitControls } from 'https://10.1.10.101/work-shop/three.js/examples/jsm/controls/OrbitControls.js';
import { OBJLoader } from 'https://10.1.10.101/work-shop/three.js/examples/jsm/loaders/OBJLoader.js';

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);
document.body.appendChild(renderer.domElement);

const light = new THREE.AmbientLight(oxffffff, 1);
scene.add(light);

const loader = new OBJLoader();
loader.load(
    'https://10.1.10.101/work-shop/base_assets/obj/Human/Characters/footman.obj',
    function( object ) {
        scene.add(object);
    },
    function( xhr ) {
        console.log((xhr.loaded/xhr.total*100)+"% loaded.");
    },
    function( error ) {
        console.error("An error happened", error);
    }
);

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
};

解决方案

我将代码修改为使用导入映射(import map)，像示例那样，这样就解决了问题。教程中的版本和我现在使用的版本之间一定存在不匹配。

HTML文件：

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <title>Three.js Learning Environment</title>

        <meta name="title"       content="Three.js Learning Environment" />
        <meta name="googlebot"   content="noindex" />
        <meta name="robots"      content="noindex" />

        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="pragma"        content="no-cache" />

        <script type="importmap">
        {
            "imports": {
                "three": "./three.js/build/three.module.js",
                "three/addons/": "./three.js/examples/jsm/"
            }
        }
    </script>

        <style>
            #test-env {
                border:  1px solid #666; 
                margin:  auto; 
                padding: 0px;
            }
        </style>

    </head>
    <body>

        <script type="module" src="three-js-test.js"></script>

    </body>
</html>

JS文件：

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';

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);
document.body.appendChild(renderer.domElement);

const light = new THREE.AmbientLight(0xffffff, 1);
scene.add(light);

const loader = new OBJLoader();
loader.load(
    'https://10.1.10.101/work-shop/base_assets/obj/Human/Characters/footman.obj',
    function( object ) {
        scene.add(object);
    },
    function( xhr ) {
        console.log((xhr.loaded/xhr.total*100)+"% loaded.");
    },
    function( error ) {
        console.error("An error happened", error);
    }
);

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
};