Vue RouterでのThree.jsの利用について

Vue Router で構築したサイトでThree.jsを利用しようとしています。

Vueの変数、メソッドで描画をしようとしていたのですが、うまく行かず、、、
エラーとしては、

[.WebGL-0x7ffd3f4a2200]RENDER WARNING: Render count or primcount is 0.

のエラーが発生しています。
Meshがうまく渡せていないのでしょうか・・・？

ソースは以下になります。

<template>
  <div class="container">
    <div id="canvas_wrap" class="canvas_wrap" @mousemove="changeBoxDirection()"></div>
  </div>
</template>

<script>
import * as THREE from 'three';

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to MyPage',
      scene : new THREE.Scene(),
      camera : new THREE.PerspectiveCamera( 100, window.innerWidth/window.innerHeight, 0.1, 1000 ),
      renderer : new THREE.WebGLRenderer(),
      geometry : new THREE.BoxGeometry( 4, 4, 4 ),
      material : new THREE.MeshBasicMaterial( { color: 0x563d7c } ),
      cube : new THREE.Mesh( this.geometry, this.material ),
    }
  },
  methods : {
    changeBoxDirection : function(){

    },
    firstdraw : function(){
      // 初期３Dオブジェクト描画
      this.cube.position.set(0,0,0);
      this.scene.add( this.cube );
      this.camera.position.z = 10;
      let canvasWrap = document.getElementById("canvas_wrap");
      this.renderer.setSize( canvasWrap.clientWidth, canvasWrap.clientHeight);
      canvasWrap.appendChild( this.renderer.domElement );
      this.renderer.render( this.scene, this.camera );

      // this.animate();
    },
    animate : function(){
      requestAnimationFrame( this.animate );
      this.renderer.render( this.scene, this.camera );
    }
  },
  mounted: function(){
    this.firstdraw();
  },
}

</script>

Vueのメソッドとして実装せずに、scriptタグに直接描画を行う場合は問題なく描画できました。
オブジェクトのパラメータをバインドするためにVueの変数として利用したいのですが、解決策がわからず。。。

なにかヒントになるようなことでも良いので、教えいていただければ幸いです。

NozomuIkuta

2018/11/11 12:54

エラーのスタックトレースはありますか

行動規範の内容に同意します

回答1件

ベストアンサー

js
1  data () {
2    return {
3      msg: 'Welcome to MyPage',
4      scene : new THREE.Scene(),
5      camera : new THREE.PerspectiveCamera( 100, window.innerWidth/window.innerHeight, 0.1, 1000 ),
6      renderer : new THREE.WebGLRenderer(),
7      geometry : new THREE.BoxGeometry( 4, 4, 4 ),
8      material : new THREE.MeshBasicMaterial( { color: 0x563d7c } ),
9      cube : new THREE.Mesh( this.geometry, this.material ),
10    }
11  },