关于vue使用three.js+sprite的简便方法

关于vue使用three.js+sprite的简便方法

做一个个人踩坑的小笔记，也希望帮到在坑中的小伙伴

由于在公司做的一个项目，需要表现的很立体，所以老大让我做一个网页3d模型(webgl)，后来又让我做模型对应的标签，头疼。对于我这样的菜鸟新手，用着vue的框架，导入three没什么，导入controls那些就会比较麻烦，需要另外再下载。这就让我很烦恼了，还好在Github上找到了vue-3d-model这个插件，用这还是不错的。

安利一下：https://github.com/hujiulong/vue-3d-model
npm install vue-3d-model，当然我是直接下了包把js它的模块单独拿出来用
引用还是比较方便的，不过可以引用的类型不是很多，如果要另外画图添加东西的话就要修改model-mixin.vue，scene.add()

//eg，方法可以直接写
 		var geometry = new THREE.CubeGeometry(1, 60, 1);//创建一个立方体
        var material = new THREE.MeshBasicMaterial({color: '#FFFFFF'});//填充的材质
        var cube = new THREE.Mesh(geometry, material);//网格绘制
        cube.position.x=0
        cube.position.y=38
        cube.position.z=0
        this.wrapper.add(cube);//场景添加网格,为什么

为什么是wrapper.add不是scene.add，因为在mixin里，先把load的模型add在一个变量里，再把变量加载入scene，如果直接scene.add会导致它们不是同一部分，转动的时候导致文字被甩出视角外

但是要加sprite用原始方法又很麻烦，要在这个模块添加

又来半安利一个three-text2d：https://github.com/gamestdio/three-text2d
npm install three-text2d
在model-mixin.vue import { SpriteText2D, textAlign } from ‘three-text2d’
因为显示的文字需要变化，所以在3d-model中做了模块传值，由于我的开发存在三次父子传值，所以我把首先得到的值存在了store里再调用

<model-glft :byvalue="value"></model-glft>

在model-mixin中用props接收，watch检测变化
假如你的位置需要调整（它原本设定的位置都不合适），最直接的修改方式就是到three-text2d的Lib下的utils修改

当然还没有解决的问题就是Load的模块如果要rotate的时候，文字不会跟随，就算是同一个场景，当然文字可以自己转动，各自转动又很明显的分离，但是自己手动旋转的问题是不大的

由于页面load模型也比较大，所以页面也采用了Vue的按需加载

const later = Vue.component('server', function (resolve) {
    setTimeout(function () {
      require(['./server3d.vue'], resolve)
    }, 3000);
  });

父模块加载后3s再加载server3d模块

components: {later},

这就让整个页面减轻了每次加载的负担