运行three.js obj mtl演示时无法读取未定义的属性“ load”

Question

我正在尝试让Three.js的OBJ模型加载演示工作。

我已经从npm导入了three和three-addons，但是出现以下错误：

application.js:43 Uncaught TypeError: Cannot read property 'load' of undefined
    at init (application.js:43)
    at application.js:21
    at Object.<anonymous> (application.js:86)
    at __webpack_require__ (bootstrap 1326183ce48070e27f4a:19)
    at Object.defineProperty.value (bootstrap 1326183ce48070e27f4a:62)
    at bootstrap 1326183ce48070e27f4a:62

这是我的代码（从https://threejs.org/examples/?q=obj#webgl_loader_obj_mtl稍作修改）：

import * as THREE from 'three';
import {MTLLoader, OBJLoader, DDSLoader} from 'three-addons';

(function() {
  var elem = $('.area-test')[0];
  if(!elem) return;

  var container, stats;
  var camera, scene, renderer;
  var mouseX = 0, mouseY = 0;
  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;
  init();
  animate();
  function init() {
    container = $('.area-test')[0];
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.z = 250;
    // scene
    scene = new THREE.Scene();
    var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
    scene.add( ambientLight );
    var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
    camera.add( pointLight );
    scene.add( camera );
    // model
    var onProgress = function ( xhr ) {
      if ( xhr.lengthComputable ) {
        var percentComplete = xhr.loaded / xhr.total * 100;
        console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
      }
    };
    var onError = function ( xhr ) { };
    THREE.Loader.Handlers.add( /\.dds$/i, new DDSLoader() );
    new MTLLoader()
      .setPath( 'models/test' )
      .load( 'lighting.mtl', function ( materials ) {
        materials.preload();
        new OBJLoader()
          .setMaterials( materials )
          .setPath( '/models/test/' )
          .load( 'lighting.obj', function ( object ) {
            object.position.y = - 95;
            scene.add( object );
          }, onProgress, onError );
      } );
    //
    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );
    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    //
    window.addEventListener( 'resize', onWindowResize, false );
  }
  function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
  }
  function onDocumentMouseMove( event ) {
    mouseX = ( event.clientX - windowHalfX ) / 2;
    mouseY = ( event.clientY - windowHalfY ) / 2;
  }
  //
  function animate() {
    requestAnimationFrame( animate );
    render();
  }
  function render() {
    camera.position.x += ( mouseX - camera.position.x ) * .05;
    camera.position.y += ( - mouseY - camera.position.y ) * .05;
    camera.lookAt( scene.position );
    renderer.render( scene, camera );
  }
})();

顺便说一句，我正在用Rails中的webpacker gem渲染现代javascript。

注意：错误所抱怨的那一行是这一行：

  new THREE.MTLLoader()
    .setPath( 'models/test' )
    .load( 'lighting.mtl', function ( materials ) {