Geometría del texto
FontLoader
En three.js, si desea mostrar el efecto del texto, puede usar FontLoader, que es una clase que usa el formato JSON para cargar fuentes. Return Font, el valor de retorno es una matriz de tipo Shape que representa la fuente. Utiliza FileLoader internamente para cargar archivos.
var loader = new THREE.FontLoader();
TextGeometry
Después de usar FontLoader, puede usar TextGeometry al generar geometría. Una clase para generar texto como un solo cuerpo geométrico. Está construido por una cadena de texto dado y parámetros compuestos por la Fuente cargada (fuente) y la configuración en la clase principal de la geometría ExtrudeGeometry.
centro:
// 文本几何体
var loader = new THREE.FontLoader();
loader.load( './Json/helvetiker_regular.typeface.json', function ( font ) {
geometry = new THREE.TextGeometry( 'Hello three.js!', {
font: font,
size: 100,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 2,
bevelSegments: 5
} );
})
Ejemplo de uso:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day09_TweenMax学习</title>
<script src="./js/three.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/OrbitControls.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
var scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
render = new THREE.WebGLRenderer({
antialias: true
});
render.setPixelRatio(window.devicePixelRatio);
render.setSize(window.innerWidth, window.innerHeight)
var app = document.getElementById("app");
app.appendChild(render.domElement);
/********************************************************/
// 文本几何体
var loader = new THREE.FontLoader();
var geometry;
var material = new THREE.MeshBasicMaterial( {
color: '#ff0000' ,
} );
loader.load( './Json/helvetiker_regular.typeface.json', function ( font ) {
geometry = new THREE.TextGeometry( 'Hello three.js!', {
font: font,
size: 100,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 2,
bevelSegments: 5
} );
var mesh = new THREE.Mesh( geometry, material );
mesh.scale.set(0.03,0.03,0.03);
scene.add(mesh)
})
// 相机
camera.position.set(20, 20, 40); //设置相机位置
camera.lookAt(new THREE.Vector3(0, 0, 0))
// 鼠标控件
var controls = new THREE.OrbitControls(camera, render.domElement);
/********************************************************/
function animate() {
render.render(scene, camera);
window.requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
Efecto específico:
Problema confuso chino
Si modifica el contenido del texto a chino, aparecerán caracteres confusos
Hello three.js! --- > 你好 three.js!
Estilo de visualización:
esto se debe a que el helvetiker_regular.typeface.json utilizado no es compatible con el chino.
Después de eso, utilicé Microsoft YaHei_Regular.json , que puede hacer que el chino se visualice normalmente
loader.load( './Json/Microsoft YaHei_Regular.json', function ( font ) {
geometry = new THREE.TextGeometry( '你好 three.js!', {
font: font,
size: 100,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 2,
bevelSegments: 5
} );
var mesh = new THREE.Mesh( geometry, material );
mesh.scale.set(0.03,0.03,0.03);
scene.add(mesh)
})
Estilo de visualización:
Paquete de fuentes
Los paquetes de fuentes utilizados por Microsoft YaHei_Regular.json y helvetiker_regular.typeface.json se pueden descargar desde los dos lugares siguientes:
Disco de red de Baidu: https://pan.baidu.com/s/1T8SLJs7HLkum2cSE3kqCTQ
Código de extracción: 730t
Descarga de CSDN: https://download.csdn.net/download/qq_36171287/15365234
También puede usar Facetype.js para convertir Facetype.js