Блог

Главная - Вопросы по программированию - Как использовать ThreeJS с VueJS

Как использовать ThreeJS с VueJS

#vue.js #three.js

#vue.js #three.js

Вопрос:

Я хочу использовать ThreeJS, поэтому я устанавливаю его с помощью npm i three —save. Я следовал базовому руководству в документации ThreeJS, но я получил ошибку.

   mounted () {
    this.initThree();
  },
  methods: {
    initThree() {
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

      this.renderer = new THREE.WebGLRenderer( { canvas: document.getElementById( "background" ), alpha: true, antialias: true } );
      this.renderer.setSize( window.innerWidth, window.innerHeight );

      let geometry = new THREE.BoxGeometry( 1, 1, 1 );
      let material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
      this.cube = new THREE.Mesh( geometry, material );
      this.scene.add( this.cube );

      this.camera.position.z = 5;
      this.animate()

    },

    animate() {

      this.cube.rotation.x  = 0.01;
      this.renderer.render( this.scene, this.camera );
      requestAnimationFrame( this.animate() );

    }
  }
}

Ошибка

Комментарии:

1. Я думаю, вам нужно инициализировать three в вашем main.js . Не в компоненте. Может быть, лучше github.com/fritx/vue-threejs

2. У меня нет проблем с инициализацией threejs, но когда я использую рекурсивную функцию. Возможно, ваша ссылка может решить мою проблему, я попробую, спасибо

3. где и как вы импортировали / объявили свой модуль three?

Ответ №1:

Ваша проблема не связана с VueJS / ThreeJS, вы должны просто исправить эту строку :

 requestAnimationFrame( this.animate() );

Это должно быть :

 requestAnimationFrame(this.animate)

Пожалуйста, прочитайте больше об обратном вызове:https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

РЕДАКТИРОВАТЬ: Вы можете попробовать TroisJS, простую интеграцию ThreeJS с VueJS: https://github.com/troisjs/trois

Комментарии:

1. Спасибо, это работает, но не могли бы вы объяснить мне, почему я должен убрать скобки

2. Поскольку в скобках animate() вызывается немедленно, без скобок он будет вызван requestAnimationFrame. developer.mozilla.org/en-US/docs/Glossary/Callback_function