您的位置：首页 > Web前端 > JavaScript

three.js添加文字

2016-12-14 16:53 411 查看

添加文字需要用到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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航