現在立法形の描画を行っているのですが、
アニメーションを実施し、回転させようとしたところでエラーが現れます。
以下がコードになります。
class Draw{
constructor(){
this.width = window.innerWidth;
this.height = window.innerHeight;
this.renderer = new THREE.WebGLRenderer({ canvas : document.querySelector("#canvas")});
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(this.width,this.height);
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(45, this.width / this.height);
this.camera.position.set(0,0,1000);
this.geometry = new THREE.BoxGeometry(100,100,100);
this.material = new THREE.MeshNormalMaterial();
this.box = new THREE.Mesh(this.geometry,this.material);
this.scene.add(this.box);
this.renderer.render(this.scene,this.camera);
}
move(){
this.box.rotation.x += 1;
this.renderer.render(this.scene,this.camera);
requestAnimationFrame(this.move);
}
}
window.onload = () => {
const draw = new Draw();
draw.move();
}
Cannot read property 'box' of undefined at move
というものであり、requestで繰り返さなければ実行できるのですが、繰り返すとエラーが出てしまいます。
どうやら繰り返した時に定義がおかしなことになっているみたいなのですが、
JSに普段触れていないせいでよくわかりません。
Java Scriptに詳しい方がいらっしゃいましたら、
どうか原因と解決方法の提示をお願いいたします。