threejs加载三维字体
程序员文章站
2022-05-26 19:09:50
...
1.效果
2.threejs代码
addFont:function(){
console.log('aaa')
let text = new this.THREE.FontLoader().load('/data/font/helvetiker_regular.typeface.json',(font)=>{
let fontGeo = new this.THREE.TextGeometry( "iCrazy", {
size: 20, //字号大小,一般为大写字母的高度
height: 10, //文字的厚度
weight: 'normal', //值为'normal'或'bold',表示是否加粗
font: font, //字体,默认是'helvetiker',需对应引用的字体文件
style: 'normal', //值为'normal'或'italics',表示是否斜体
bevelThickness: 1, //倒角厚度
bevelSize: 1, //倒角宽度
curveSegments: 30,//弧线分段数,使得文字的曲线更加光滑
bevelEnabled: true, //布尔值,是否使用倒角,意为在边缘处斜切
} );
let fontMat = new this.THREE.MeshPhongMaterial({
color: 0xcccccc,
shininess: 60,
specular: 0xcccccc
})
let fontMesh = new this.THREE.Mesh(fontGeo,fontMat)
fontMesh.rotation.x = -Math.PI/2
this.scene.add(fontMesh)
},undefined,(e)=>{console.log(e)})
说明:MeshPhongMaterial
参数设定
3.问题说明
(一)字体引入
通过http://gero3.github.io/facetype.js,这个网址可以把字体文件ttf格式转化成json文件就是我们需要引入的。中文字体的引入就是需要将中文的ttf字体先转化成json格式再引用就可以显示中文啦。
(二)文件路径
出现如上的错误就是json文件的路径不对,记住所有threejs加载的问价都需要放在静态文件夹下,这里用的Vue3+,所以就是Public文件夹下,在引用的时候一定要用绝对路径,不要用相对路径。
推荐阅读
-
c#两种方式调用google地球,调用COM API以及调用GEPLUGIN 与js交互,加载kml文件,dae文件。将二维高德地图覆盖到到三维谷歌地球表面。
-
浅析Android加载字体包及封装的方法
-
arcgis三维球中加载2000坐标系出现错误(The tiling scheme of this layer is not supported by SceneView)
-
AE怎么制作三维立体的文字? ae中3d字体的设计方法
-
3dmax怎么创建三维立体的发光字体? 3dmax发光字的做法
-
java swing 实现加载自定义的字体
-
在Vue.js中加载字体的正确方法
-
Gltf模型太大,Threejs加载耗时怎么办?答:Blender导出Gltf可以被gltf-pipeline压缩90%
-
ps怎么设计类似c4d建模出来的字体? ps三维立体文字的创建方法
-
AE2019怎么快速建模三维立体字体?