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(){ // 初期3Dオブジェクト描画 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の変数として利用したいのですが、解決策がわからず。。。
なにかヒントになるようなことでも良いので、教えいていただければ幸いです。
回答1件
あなたの回答
tips
プレビュー