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)
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).
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 );
this.render();
}
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.
