我想使用 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() );
}
}
}
最佳答案
你的问题与 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
关于vue.js - 如何在 VueJS 中使用 ThreeJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55223524/