Problems with gltf when running vue-cli-service build

The first time can display the model and the action correctly
Refresh map display error!

Three.js version
  • r106
  • r107
  • r108 (Model cannot be displayed and reported bug)
    three.min.js:47 Uncaught TypeError: Cannot read property 'type' of undefined
        at Xi.setIndex (three.min.js:47)
        at dg.renderBufferDirect (three.min.js:208)
        at p (three.min.js:177)
        at m (three.min.js:177)
        at dg.render (three.min.js:215)
        at animate (ThreejsWorld.vue?910e:221)
  • Chrome
  • Safari
  • All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS

github repository

I have fixed your issues and packed everything into the following zip file (after downloading, perform npm i and then npm run serve in the root directory). (2.7 MB)

TBH, there were several major errors in your app:

  • Import your external dependencies in a consistent way. You have mixed import statements with <script> imports which is no good approach.
  • Your animation loop was messed up, hence the bad performance. When your animation loop is in fact a method, use the following approach.
// define this function outside of your class

function animate() {

    requestAnimationFrame( this._animate );



In the constructor or init() routine of your class you do this:

this._animate = animate.bind( this );

You start the animation by calling this._animate().

It’s also recommended to keep your source files clean. There was a lot of commented-out and irrelevant code which only leads to confusion. You also have to ensure that the core of the engine and classes from the examples directoy (e.g. OrbitControls, GLTFLoader etc.) are from the same release! You have used three.js from release 106 and OrbitControls/GLTFLoader from 108 which is actually not allowed.

1 Like

Thanks :partying_face:

1 Like