添加文字需要用到fontLoader,測試貌似只能異步。在success中回調。
對於中文字體，需要將ttf格式轉換為json格式或者是js格式之后才能使用，不過一般轉換之后的文件比較大。建議使用Fontmin工具先壓縮字體。比如說快上線的時候使用就可以了。
轉換格式的網站是:http://gero3.github.io/facetype.js/
來個測試路徑：https://zengxiangliang.github.io/three_text/
源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="../js/three.js"></script>
<script type="text/javascript" src="../js/Tween.js"></script>
<script>
var scene, camera, renderer;
var ww = window.innerWidth;
var wh = window.innerHeight;
var aspect = ww / wh;
function initThree() {
// 創建場景
scene = new THREE.Scene();
// 創建相機
camera = new THREE.PerspectiveCamera(70, aspect, 1, 2000);
camera.position.set(0, 0, 100);
// 創建渲染器（WebGL渲染器）
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor(0x000000, 1);
renderer.setSize(ww, wh);
document.body.appendChild(renderer.domElement);
createPointLight();
createDireLight();
}
// 創建點光源 需要照亮場景
function createPointLight() {
var light = new THREE.PointLight(0xffe502, 1, 1000);
light.position.set(50, 50, 50);
scene.add(light);
}
// 創建方向光 金屬感強烈
function createDireLight() {
var direLight = new THREE.DirectionalLight(0xffe502, 1000);
direLight.position.set(0, 500, 0);
direLight.castShadow = true;
scene.add(direLight);
}
// 執行動畫
function animate() {
TWEEN.update();
renderer.render(scene, camera);
requestAnimationFrame(animate)
}
// 創建文字
function createText() {
var text = new THREE.FontLoader().load('../font/helvetiker_bold.typeface.json', function(text) {
var gem = new THREE.TextGeometry('51JOB', {
size: 20, //字號大小，一般為大寫字母的高度
height: 10, //文字的厚度
weight: 'normal', //值為'normal'或'bold'，表示是否加粗
font: text, //字體，默認是'helvetiker'，需對應引用的字體文件
style: 'normal', //值為'normal'或'italics'，表示是否斜體
bevelThickness: 1, //倒角厚度
bevelSize: 1, //倒角寬度
curveSegments: 30,//弧線分段數，使得文字的曲線更加光滑
bevelEnabled: true, //布爾值，是否使用倒角，意為在邊緣處斜切
});
gem.center();
var mat = new THREE.MeshPhongMaterial({
color: 0xffe502,
specular: 0x009900,
shininess: 30,
shading: THREE.FlatShading
});
var textObj = new THREE.Mesh(gem, mat);
textObj.castShadow = true;
scene.add(textObj);
new TWEEN.Tween(textObj.rotation).to({y: Math.PI * 2}, 2000).repeat(Infinity).yoyo(true).start();
});
}
// start
function threeStart() {
initThree();
createText();
animate();
}
// resize
function onResize() {
ww = window.innerWidth;
wh = window.innerHeight;
camera.aspect = ww / wh;
camera.updateProjectionMatrix();
renderer.setSize(ww, wh);
}
window.addEventListener('load', threeStart, false);
window.addEventListener('resize', onResize, false);
</script>
</body>
</html>