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

three.js添加文字的更多相关文章

  1. chart.js图表库案例赏析，饼图添加文字

    chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...

  2. JS为网页添加文字水印【原创】

    最近需要实现为网页添加水印的功能,由于水印的信息是动态生成的,而百度谷歌上的方法往往都是为网页添加图片水印或为图片添加水印,而为网页添加文字水印相关资料较少,于是就自己动手写了这个代码. 通常加动态水 ...

  3. JS控制文字只显示两行，超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  4. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  5. JS实现文字转语音播放

    JS实现文字转语音播放背景实现方式第一种:百度文字转语音开放API第二种:微软TTS语音引擎第三种:SpeechSynthesisUtterance总结背景在做项目的过程中,经常会遇到场景是客户要求播 ...

  6. js 实现文字滚动功能，可更改配置参数 带完整版解析代码。

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...

  7. C#使用 DirectX SDK 9做视频播放器 并在视频画线添加文字 VMR9

    视频图像处理系列 索引 VS2013下测试通过. 在百度中搜索关键字“DirectX SDk”,或者进入微软官网https://www.microsoft.com/en-us/download/det ...

  8. 如何在IamgeButton上面添加文字

    如何在IamgeButton上面添加文字? 首先要知道,IamgeButton是不可以直接添加文字的.所以我们需要间接制作一个Button按钮 我的代码将会展示另外一个例子,与本文中的代码相似. 本文 ...

  9. ios图片添加文字或者水印

    在项目中,我们会对图片做一些处理,但是我们要记住,一般在客户端做图片处理的数量不宜太多,因为受设备性能的限制,如果批量的处理图片,将会带来交互体验性上的一些问题.首先让我们来看看在图片上添加文字的方法 ...

随机推荐

  1. [moka同学笔记]四、Yii2.0课程笔记（魏曦老师教程）[匿名函数的使用操作]

    在评论页面中index.php中 [ 'attribute'=>'status', 'value'=>'status0.name', 'filter'=>Commentstatus: ...

  2. GJM ：Unity3D 5.x性能分析工具与应用方法

    原帖地址 http://gad.qq.com/content/coursedetail/7180616 Unity Profiler Unity => Window=>Profiler P ...

  3. 《移动端浏览器Touch事件判断手指滑动方向方法》

    $("body").on("touchstart", function(e) {     e.preventDefault();     startX = e. ...

  4. 强大css3制作新浪LOGO 胜过PS

    请使用支持CSS3的浏览器查看效果:http://keleyi.com/a/bjad/6lu3dgj8.htm 效果图: 完整代码如下: <html> <head> <t ...

  5. jQuery 购物车鼠标经过出现下拉框的做法

    这一段时间在学习web前端,最近学了jQuery库,深感其强大,下面通过写购物车的下拉框做法,把自己的理解和大家交流一下,欢迎各位大神指点指正,废话不多说,开始正题: 购物车html: <!-- ...

  6. 实现UITextView的placeholder

    我们知道在iOS开发时,控件UITextField有个placeholder属性,UITextField和UITextView使用方法基本类似,有两个小区别:1.UITextField单行输入,而UI ...

  7. Event 8306 5021 5059 5057发布安全令牌时异常

    现象:站点访问一个,应用程序池就自动停掉一个 日志报错       解决: 1.受域策略影响,作为批处理作业登录选项被锁定,需修改域策略: 更新后:     2.确保程序池账户倒在IIS_IUSER组 ...

  8. wireshark 实用过滤表达式（针对ip、协议、端口、长度和内容）

    首先说几个最常用的关键字,"eq" 和 "=="等同,可以使用 "and" 表示并且,"or"表示或者."!& ...

  9. 细说ASP.NET Forms身份认证

    阅读目录 开始 ASP.NET身份认证基础 ASP.NET身份认证过程 如何实现登录与注销 保护受限制的页面 登录页不能正常显示的问题 认识Forms身份认证 理解Forms身份认证 实现自定义的身份 ...

  10. 拯救你的文档 – 【DevOps敏捷开发动手实验】开源文档发布

    今天上海的天气真是不错,风和日丽.再次来到微软上海紫竹研发中心,心情很是愉快,喜欢这里的大草坪,喜欢这里的工程气氛,更喜欢今天来陪我的小伙伴们. 这次动手实验培训与以往最大的不同就是采用了开源文档的方 ...