四川营销网站建设,北京网络科技公司,地方门户网站建设方案,怎么制作网站上传最近因为three.js的项目要用Vue.js 来重构#xff0c;所以不太清楚在Vue里面怎么引入。找了很多方法都是一直报错#xff0c;最后在Stack Overflow找到了。
首先是下载包#xff0c;直接用 npm install three --save 就行了。
然后就是在component里面引入。
templat…最近因为three.js的项目要用Vue.js 来重构所以不太清楚在Vue里面怎么引入。找了很多方法都是一直报错最后在Stack Overflow找到了。
首先是下载包直接用 npm install three --save 就行了。
然后就是在component里面引入。
templatedivdiv idcontainer/div/div
/templatescript
import * as Three from threeexport default {name: ThreeTest,data() {return {camera: null,scene: null,renderer: null,mesh: null}},methods: {init: function() {let container document.getElementById(container);this.camera new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);this.camera.position.z 1;this.scene new Three.Scene();let geometry new Three.BoxGeometry(0.2, 0.2, 0.2);let material new Three.MeshNormalMaterial();this.mesh new Three.Mesh(geometry, material);this.scene.add(this.mesh);this.renderer new Three.WebGLRenderer({antialias: true});this.renderer.setSize(container.clientWidth, container.clientHeight);container.appendChild(this.renderer.domElement);},animate: function() {requestAnimationFrame(this.animate);this.mesh.rotation.x 0.01;this.mesh.rotation.y 0.02;this.renderer.render(this.scene, this.camera);}},mounted() {this.init();this.animate()}
}
/script
style scoped#container {height: 400px;}
/style
