Three.js - Uncaught ReferenceError: OBJLoader is not defined答案

【问题标题】：Three.js - Uncaught ReferenceError: OBJLoader is not definedThree.js - Uncaught ReferenceError: OBJLoader is not defined
【发布时间】：2021-09-28 09:37:29
【问题描述】：

我正在关注有关 Three.js 的几个教程，但在尝试实现自己的 .obj 文件时，我不断收到 Uncaught ReferenceError: OBJLoader is not defined 错误。尝试了不同的方法，没有任何帮助。被这个问题困扰了好几天。

我正在使用 http-server 在 localhost 上运行。

奇怪的是，当我将 new OBJLoader(); 切换到 new THREE.ObjectLoader(); 时，它似乎在尝试加载文件时工作，尽管该文件不是 .json 文件，它是 .obj 所以它会引发错误。

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>three.js crash course</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <script type="module" src="js/jQuery.js"></script>
        <script type="module" src="js/three.min.js"></script>
        <script type="module" src="js/OrbitControls.js"></script>
        <script type="module" src="loaders/GLTFLoader.js"></script>
        <script type="module" src="loaders/OBJLoader.js"></script>
        <script type="module" src="js/index.js"></script>
    </body>
</html>

window.onload = function() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    $(window).resize(function(){
        var width = window.innerWidth;
        var height = window.innerHeight;
        renderer.setSize(width, height);
        camera.aspect = width/height;
        camera.updateProjectionMatrix();
    });

    var controls = new THREE.OrbitControls(camera, renderer.domElement);

    const loader = new OBJLoader();

    loader.load (
        // resource URL
        './models/boat_large.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' );

        }
    );

    camera.position.z = 3;

    var ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.8);


    // game logic
    var update = () => {
    
    };

    // draw scene
    var render = () => {
        renderer.render(scene, camera);
    };

    // run game loop (update, render, repeat)
    var GameLoop = () => {
        requestAnimationFrame(GameLoop);
    
        update();
        render();
    }

    GameLoop();
}

【问题讨论】：

标签： javascript html three.js

【解决方案1】：

当你引用这样的javascript文件时，你需要使用new THREE.OBJLoader()。

它在 ThreeJS 示例中起作用的原因是，因为它是通过导入的

import { OBJLoader } from './jsm/loaders/OBJLoader.js';

或者，您可以像example 中所示那样包含文件 . 在你的情况下，它显然是这样的

import { OBJLoader } from '../loaders/OBJLoader.js';

假设上面发布的 JS 来自index.js。

【讨论】：

我试过这样做。我替换为new THREE.OBJLoader()，得到Uncaught TypeError: THREE.OBJLoader is not a constructor。我还尝试在window.onload 之后添加import，我得到了Uncaught SyntaxError: Unexpected token '{'
我尝试在window.onload 之前添加import，但它不再给我Unexpected token 错误，但我仍然得到Uncaught TypeError: THREE.OBJLoader is not a constructor
如果你添加import 之前 window.onload你需要使用new OBJLoader();。
我设法让它工作了，谢谢！但现在我得到了一个THREE.OBJLoader: Rendering identifier "usemap" not supported. Textures must be defined in MTL files :/
嗯，我认为这是不言自明的，不是吗？否则，请在研究完此问题后打开另一个问题。

【解决方案2】：

添加以下导入对我有用：

import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader';

【讨论】：