Вопрос по загрузке 3d объекта в mounted vue js

Question

Я не могу понять почему в load объект с данными animated = undefined. Я так же пытался реализовать функции init и animate в methods и исполнять их в load, но они так же были undefined. Задача заключается в том, что когда экземпляр готов, я загружаю мой 3d объект и добавляю его на сцену. После чего анимирую его и меняю флаг animated на true. В чем заключается проблема? Снизу в коде я закомментировал когда animated = false (то, что мне нужно), а когда undefined. И ещё: 3д объект находится в папке public.

Код:

export default {
  name: 'app',
  components: {
   
  },
  data() {
    return {
      animated: false
    }
  },
  mounted() {
    let loader = new GLTFLoader();
    
    console.log(this.animated) //false

    loader.load(
    '/threeAssets/obj.gltf',
    function (gltf) {
      gltf.scene.traverse(function (child) {
        if (child.isMesh) {
          object = child;
        }
      })
      console.log(this.animated) //undefined
      init();
      animate();
    });

    function init() {
      ...
    }

    function animate() {
      ...
    }

  }

Answer 1

попробуйте так

function (gltf) {
  gltf.scene.traverse(function (child) {
    if (child.isMesh) {
      object = child;
    }
  })
  console.log(this.animated) //undefined
  init();
  animate();
}.bind(this));

БЛОГ НА HUSL

Вопрос по загрузке 3d объекта в mounted vue js

Ответы (1 шт):