添加文字需要用到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. 用Fiddler做为手机的上网代理

    1. 首先需要知道你电脑的ip地址,这个略. 2. 打开手机,wifi那里,选择你的路由器,编辑或者设置,每个手机叫法不一样,点进去 到了里面,每个手机不一样,但是大致上,有一个[使用代理]的这么一个 ...

  2. iOS 大文件断点下载

    iOS 在下载大文件的时候,可能会因为网络或者人为等原因,使得下载中断,那么如何能够进行断点下载呢? // resumeData的文件路径 #define XMGResumeDataFile [[NS ...

  3. Docker dockerfile创建Eclipse镜像初试

    抽空初步阅读了Docker技术入门与实战 [Kindle电子书] http://www.cnblogs.com/2018/p/4600116.html 现在想首先在开发环境下引入统一的环境,由于开发中 ...

  4. 转一篇简洁的UIView动画编程方法

    iOS  中的 UIView 动画编程其实还是很简单的,像 CSS3 一样,在给定的时间内完成状态连续性的变化呈现.比如背景色,Frame 大小,位移.翻转,特明度等. 以前我使用的编程方式都是用下面 ...

  5. 深入理解RunLoop

    网上看的一篇文章,写的真好,我得多看几次好好理解理解 膜拜大神,转载至此便于学习查看. 此处标明原文链接:http://blog.ibireme.com/2015/05/18/runloop/    ...

  6. iOS程序逆向Mac下常用工具——Reveal、HopperDisassemble、IDA

    原文在此 一.Reveal 1 一般使用     Reveal是ITTY BITTY发布的UI分析工具,可以很直观的查看App的UI布局.如下图所示:     Reveal是需要付费的,需要89美元, ...

  7. vim vundle 安装Base16 Vim主题

    1.vim /etc/vimrc set background=dark colorscheme base16-default 2.同样在vimrc中的vundle位置添加 Plugin 'chris ...

  8. Windows 10 IoT Serials 2 - Windows 10 IoT RTM 升级教程

    7月29日,微软推出了Windows 10 for PC的正式版,其版本号是Build 10240.近两天官方说已经有4700万的下载安装量,同时这个数字还在不断攀升.另外,除了Windows 10 ...

  9. 原生js事件的添加和删除

    在IE浏览器中添加或删除事件用attachEvent.detachEvent.在其他标准浏览器中则用addEventListener.removeEventListener.下面的对事件的添加和删除做 ...

  10. Javascript 中的严格模式

    原文:http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html 一.概述 除了正常运行模式,ECMAscript 5添加了第 ...