Text geometry
FontLoader
In three.js, if you want to display the effect of text, you can use FontLoader, which is a class that uses JSON format to load fonts. Return Font, the return value is an array of Shape type representing the font. It uses FileLoader internally to load files.
var loader = new THREE.FontLoader();
TextGeometry
After using FontLoader, you can use TextGeometry when generating geometry. A class for generating text as a single geometric body. It is constructed by a string of given text, and parameters composed of the loaded Font (font) and the settings in the parent class of the geometry ExtrudeGeometry.
core:
// 文本几何体
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
} );
})
Example of use:
<!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>
Specific effect:
Chinese garbled problem
If you modify the text content to Chinese, garbled characters will appear
Hello three.js! --- > 你好 three.js!
Display style:
This is because the helvetiker_regular.typeface.json used does not support Chinese.
After that, I used Microsoft YaHei_Regular.json , which can make Chinese display normally
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)
})
Display style:
Font pack
The font packages Microsoft YaHei_Regular.json and helvetiker_regular.typeface.json used can be downloaded from the following two places:
Baidu network disk: https://pan.baidu.com/s/1T8SLJs7HLkum2cSE3kqCTQ
extraction code: 730t
CSDN download: https://download.csdn.net/download/qq_36171287/15365234
You can also use Facetype.js to convert Facetype.js