无法解析三个 gltf-loader 中的“三个”答案

【问题标题】：Can't resolve 'three' in three-gltf-loader无法解析三个 gltf-loader 中的“三个”
【发布时间】：2020-12-30 22:58:02
【问题描述】：

这是我第一次找不到答案，不得不在这里写。我正在尝试使用 Vue.js 的three.js 项目。我有这个错误：

编译失败。 ./node_modules/three-gltf-loader/index.js 未找到模块：错误：无法解析“C:\Users\Skunk\Documents\dolfin\dolfin\node_modules\three-gltf-loader”中的“three”

我的代码：

import * as THREE from 'three-js';
import GLTFLoader from 'three-gltf-loader';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted(){
    let scene = new THREE.Scene( );
    let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerWidth / window.innerHeight, 0.1, 1000);
    let renderer = new THREE.WebGLRenderer( );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    window.addEventListener( 'resize', function( )
    {
      let width = window.innerWidth;
      let height = window.innerHeight;
      renderer.setSize( width, height);
      camera.aspect = width / height;
      camera.updateProjectionMatrix( );
    } );
    const loader = new GLTFLoader();


// Load a glTF resource
    loader.load(
        // resource URL
        'models/dol.gltf',
        // called when the resource is loaded
        function ( gltf ) {

          scene.add( gltf.scene );

          gltf.animations; // Array<THREE.AnimationClip>
          gltf.scene; // THREE.Group
          gltf.scenes; // Array<THREE.Group>
          gltf.cameras; // Array<THREE.Camera>
          gltf.asset; // Object

        },
        // called while loading is progressing
        function ( xhr ) {

          console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

        }
    );

    camera.position.z = 3;

    //let ambientLight = new THREE.AmbientLight( 0xFFFFFF, 0.8);
    // scene.add( ambientLight );

    // game logic
    let update = function ( )
    {};

    // draw scene
    let render = function( )
    {
      renderer.render( scene, camera );
    };

    // run game loop
    let GameLoop = function( )
    {
      requestAnimationFrame( GameLoop );
      update( );
      render( );
    };

    GameLoop( );
  }
}

我是否使用了不兼容的代码？

【问题讨论】：

标签： vue.js three.js

【解决方案1】：

对于初学者，您不应该使用"three-js" node module。这是一个非常过时的 3 版本，卡在 r79 上，并且在 4 年内没有更新。相反，您应该使用官方的"three" node module，这是合法的库，目前在r124。

其次，只需从“three/examples”文件夹中导入 GLTF 加载程序，如 in the GLTF examples 所示，而不是安装全新的模块。

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

const loader = new GLTFLoader();

【讨论】：