Question

我想使用three.js显示gltf文件。为此，我必须从three.js节点包中导入GLTFLoader模块。

根据documentation的实现方式是通过这样导入：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

此行不会给我任何错误。如果我以任何方式更改路径，控制台都会告诉我他们找不到模块，因此我可以确定它正在以当前编写的方式查找模块。

但是，当我继续调用加载程序时，就像documentation所说的那样，使用此行：

var loader = new THREE.GLTFLoader();

我收到此错误：

GLTFLoader is not a constructor

我在做什么错？

我尝试了多种导入加载器的方法，但均未成功，而且我发现的每个线程似乎都使用相同的导入方法，而没有遇到相同的错误。这是上下文中的相关代码。

<template>
    <div id="container"></div>
</template>

<script>
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

export default {
  name: 'ThreeTest',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    }
  },
  methods: {
    init: function() {
        var loader = new THREE.GLTFLoader();

        loader.load( 'assets/Models/eames_lounge_chair/scene.gltf', function ( gltf ) {

            scene.add( gltf.scene );

        }, undefined, function ( error ) {

            console.error( error );

        } );

    },
    animate: function() {

    },
    onWindowResize: function() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );
    }
  },
  mounted() {

        this.init();
        this.animate();
  }
}
</script>

<style scoped>
    #container {
        width: 10em;
        height: 10em;
    }
</style>

Answer 1

通过导入加载程序时

从'three / examples / jsm / loaders / GLTFLoader.js'导入{GLTFLoader};

然后在创建加载程序时不必使用THREE命名空间。只需这样做：

var loader = new GLTFLoader();

如何在Vue项目中正确导入Three.js模块？

1 个答案: