关于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},
这就让整个页面减轻了每次加载的负担