ThreeJS给模型添加介绍文字(贴在模型上 不会一直面向我们)

使用到 FontLoader跟 TextGeometry

引包

import {TextGeometry} from "three/examples/jsm/geometries/TextGeometry";
import {FontLoader} from "three/examples/jsm/loaders/FontLoader";

使用

// 创建字体加载器并加载字体
const fontLoader = new FontLoader();
//注意这里用到的json 现在文字字体然后在网上在线直接转成json
fontLoader.load('/static/ziti.json', function (font) {
 	 // 创建材质 就是控制字体颜色其实
     const textMaterial = new THREE.MeshBasicMaterial({color: '#00ff00'});
     // 创建文字几何体
     const textGeometry = new TextGeometry('贴图文字', {
       font: font,
       size: 80,
       height: 0.2,
       curveSegments: 12,
       bevelEnabled: true,
       bevelThickness: 0.1,
       bevelSize: 0.1,
       bevelOffset: 0,
       bevelSegments: 5
     });
})
const mesh123 = new THREE.Mesh(textGeometry, textMaterial);
mesh123.position.x = position.x
mesh123.position.y = position.y
mesh123.position.z = position.z
//mesh123.name = 'mesh123Text'
//mesh123.rotation.x = -Math.PI / 2
scene.add(mesh123);

辅助网格(方便定位文字在哪里)

 // 创建网格并添加到场景
// 4000 网格大小 20 网格数量   网格颜色
var gridHelper = new THREE.GridHelper(4000, 20, '#00ff00', '#0000ff'); 
gridHelper.position.set(0, 20, -.1) //设置位置
gridHelper.visible = true // 设置网格显示和隐藏
scene.add(gridHelper);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值