1、通过TextTrue创建
THREE.jS封装了TextGeometry类可以很容易地生成E维文字
TextGeometry(text : String, parameters : object )参数说明
var textLoad = new THREE.FontLoader().1oad('fonts/helvetiker_regular.typeface.json' ,function(font)(var txtGeo = new THREE.TextGeometry('he11o world',{font: font ,size: 0.8,height: 0.1,curveSegments: 12,bevelEnabled: true ,bevelThickness: 0.1,bevelsize: 0.05,bevelSegments: 3]);var txtMater = new THREE.MeshBasicMaterial(color: 0x0000ff]);var txtMesh = new THREE.Mesh(txtGeo, txtMater);txtMesh.position.set(-2,2.3,-0.4);scene.add(txtMesh);
]);将.ttf转换为json的网站 Facetype.js
DEMO1
DEMO2
2、通过精灵模型和Canvas画布
Three.js的精灵模型对象Sprite和Threejs的网格模型Mesh-样都是模型对象，基类都是0bject3D.关于精灵模型对象Spr ite的方法和属性除了可以查看文档Sprite,也可以查看基类0bject3D。
创建精灵模型对象Sprite和创建网格模型对象一样需要创建一 个材质对象，不同的地方在于创建精灵模型对象不需要创建几何体对象Geometry,精灵模型对象本质上你可以理解为已经内部封装了一个平面矩形几何体PlaneGeometry,矩形精灵模型与矩形网格模型的区别在于精灵模型的矩形平面会始终平行于Canvas画布。
Sprite和SpriteMaterial
通辻Sprite創建精昃模型不需要几何体，只需要給枸造凾数Spr ite的参数没置カ一个精灵材质SpriteMaterial即可。
精昃材対象SpriteMaterial和普通的网格材质一样可以没置颜色color、颜色贴图.map、开启透明.transparent、透明度. opacity等属性，精灵材质对象SpriteMaterial的基类是材质Material。
精灵材质SpriteMaterial的属性除了和网格材质类似的属性和方法外，还有一些自己独特的方法和属性，比如.rotation旋特精灵模型，更多相关属性和方法可以査看threejs文档美于SpriteMaterial的介紹。
const texture = new THREE.TextureLoader().load( 'textures/sprite.png' );
// 创建精灵材质对象SpriteMaterial
const material = new THREE.SpriteMaterial({ color: 0xffffff, // 设置精灵矩形区域颜色rotation: Math.PI/4, // 旋转精灵对象45度，弧度值map: texture // 设置精灵纹理贴图
});
// 创建精灵模型对象，不需要任何几何体geometry参数
const sprite = new THREE.Sprite( material );scene.add( sprite );
// 控制精灵大小，比如可视化中精灵大小表征数据大小
sprite.scale.set(200, 200, 1) // 只需要设置x,y两个分量就可以. scale和. position
精灵模型对象和网格模型Mesh对一样基类都是object3D，自然精灵模型也有缩放属性. scale和位置属性. position, 一般般设置精灵模型的大小是通过.scale属性实现，而精灵模型的位置通过属性，position实现， 精灵模型和普通模型-样，可以改变它在三维场景中的位置，区别在于精灵模型的正面一直平行于canvas画布。
在使用透视投影相机对象的时候，精灵模型对象显示的大小和网格模型一样受距离相机的距离影响，也就是距离越远，显示效果越小。
Sprite用途
说到精灵模型对象，这种情况下你肯定关心它的用途，关于用途，你可以在三维场景中把精灵模型作为一个模型的标签,标签上可以显示一个写模型的信息，你可以通过足够多的精灵模型对象，构建一个粒子系统， 来模拟一个下雨、森林、或下雪的场景效果。
精灵模型和Canvas应用的DEMO
本文链接：https://my.lmcjl.com/post/8482.html
4 评论