添加文字需要用到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. jQuery AutoComplete 自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...

  2. jquery定时滑出可最小化的底部提示层

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/index.htm当打开页面或者刷新页面后等待两秒钟,会在底部滑出可最小化的提示层.滑出层半透明,可关闭再现. ...

  3. Struts2(2) —— Action

    Struts2框架中的Action类是一个单独的javabean对象.不像Struts1中还要去继承HttpServlet,耦合度减小了. 1,流程 拦截器拦截请求,创建代理Action对象,执行方法 ...

  4. jQuery静态方法isFunction,isArray,isWindow,isNumeric使用和源码分析

    上一篇随笔中总结了js数据类型检测的几个方法和jQuery的工具方法type方法,本篇要分析几个方法都依赖type方法,所以不了解type方法的请先参看http://www.cnblogs.com/y ...

  5. iOS之App加急审核详细步骤

    申请加急网址:https://developer.apple.com/appstore/contact/appreviewteam/index.html 补充:加急审核说明是可以写中文的 提交加急审核 ...

  6. Android开发学习——android体系结构

    Android的体系结构采用了分层架构的思想, 从上层到底层共包括四层,分别是应用程序程序层.应用框架层.系统库和Android运行时和Linux内核. 一 应用程序层 该层提供一些核心应用程序包,例 ...

  7. Android Support Library介绍

    v4 Support Library 这个库是为Android 1.6(API版本为4)及以上的版本设计的,它包含大部分高版本中有而低版本中没有的API,包括application component ...

  8. Android内存泄漏

    Java是垃圾回收语言的一种,其优点是开发者无需特意管理内存分配,降低了应用由于局部故障(segmentation fault)导致崩溃,同时防止未释放的内存把堆栈(heap)挤爆的可能,所以写出来的 ...

  9. Java的异常处理

    Java的异常处理是通过5个关键字来实现的:try,catch,throw,throws,finally.JB的在线帮助中对这几个关键字是这样解释的:       Throws: Lists the ...

  10. 在执行xp_cmdshell的过程中出错，调用'LogonUserW'失败，错误代码：'1909'

    在上篇文章Could not obtain information about Windows NT group/user 'xxxx\xxxx', error code 0x5里面,我介绍了SQL ...