原生JS集成Three.js报错THREE.OBJLoader is not a constructor

问题场景 #

将Codepen公开示例代码迁移到无框架的原生JavaScript项目时，因设备不支持WebGL2，最初仅修改了渲染器初始化代码，将原有WebGLRenderer替换为WebGL1Renderer：

// 原有代码
Background.renderer = new THREE.WebGLRenderer({ alpha: true });

// 修改后的错误尝试代码
Background.renderer = new THREE.WebGL1Renderer({ alpha: true });

修改后Three.js始终无法正常运行，持续抛出错误。
出问题时项目的脚本引入顺序如下：

<script src="assets/js/modernizr.custom.63321.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js"
      integrity="sha512-bzjaf85dHTL4H0BvkAJ/Jbvxqf1rDj+jVpCNe3oxQj/RXSnkx1HnKhqIcmMWghxEAbXsYgddrc38saWpltlkug=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
  </head>
  <body>
    <div class="particlehead"></div>
    <h1><strong>WebGL</strong> head made <em>of</em> particles</h1>
    <script src="assets/js/main.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
      integrity="sha512-3n19xznO0ubPpSwYCRRBgHh63DrV+bdZfHK52b1esvId4GsfwStQNPJFjeQos2h3JwCmZl0/LgLxSKMAI55hgw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40480/OBJLoader.js"></script>

可行修复步骤 #

按以下顺序调整即可正常运行：

• 还原渲染器初始化代码，改回Background.renderer = new THREE.WebGLRenderer({ alpha: true });
• 将原有r122版本的Three.js依赖替换为r61版本，引入代码如下：

<script
      src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"
      integrity="sha512-Umo2flOa4LGkVHRQ17JlfSaDZdj2QuedGJ8/H3OO4EFujr1rfpkWI6/njf3ucOws8PiqcyVvVKHYegwhirm/PA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

• 调整脚本加载顺序，确保THREE.OBJLoader依赖在main.js引入之前加载完成。

内容的提问来源于stack exchange，提问作者Stamatis Valis