javascript - Three.js - Uncaught ReferenceError: OBJLoader is not defined

问题描述

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

我正在使用 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();
}

标签： javascripthtmlthree.js

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

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

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

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

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

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

javascript - Three.js - Uncaught ReferenceError: OBJLoader is not defined

问题描述

解决方案

推荐阅读