添加文字需要用到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. bzoj 1179[Apio2009]Atm (tarjan+spfa)

    题目 输入 第一行包含两个整数N.M.N表示路口的个数,M表示道路条数.接下来M行,每行两个整数,这两个整数都在1到N之间,第i+1行的两个整数表示第i条道路的起点和终点的路口编号.接下来N行,每行一 ...

  2. 06-图1 列出连通集 (25分)（C语言邻接表实现）

    题目地址:https://pta.patest.cn/pta/test/558/exam/4/question/9495 由于边数E<(n*(n-1))/2 所以我选用了邻接表实现,优先队列用循 ...

  3. MyBatis Mapper.xml文件中 $和#的区别

    MyBatis Mapper.xml文件中 $和#的区别   网上有很多,总之,简略的写一下,作为备忘.例子中假设参数名为 paramName,类型为 VARCHAR . 1.优先使用#{paramN ...

  4. Ant_build.xml的最完整解释

    Ant的概念Make命令是一个项目管理工具,而Ant所实现功能与此类似.像make,gnumake和nmake这些编译工具都有一定的缺陷,但是Ant却克服了这些工具的缺陷.最初Ant开发者在开发跨平台 ...

  5. css知多少（12）——目录

    <css知多少>系列就此完结了.常来光顾的朋友可能会觉得突然:css的知识点还有很多,怎么突然就完了,还没讲完呢?这样说是对的.不过凡事都有一个定位,如果盲目求多,定位模糊,那样就没有目的 ...

  6. 【小贴士】探一探javascript中的replace

    javascript字符串与数组有很多精巧的方法,比如splice.indexOf,而replace在字符串处理中偶尔会产生让人愉悦的效果 比如underscore中的模板引擎替换部分,又如信用卡分割 ...

  7. JavaScript判断变量值简单的方法

    今天在看一个动态web表单设计器的时候发现项目中的 一个写法 function sum_total(v){ if (!v) { v= 0; } } !v  这是什么写法?不过可以肯定的是,这是一种判断 ...

  8. 显示快照监控:/SDF/MON

    透过SE38运行程序/SDF/MON,可以显示屏幕的监控快照:

  9. Linux0.11内核--内存管理之1.初始化

    [版权所有,转载请注明出处.出处:http://www.cnblogs.com/joey-hua/p/5597705.html ] Linux内核因为使用了内存分页机制,所以相对来说好理解些.因为内存 ...

  10. OpenGL FrameBufferCopy相关Api比较（glCopyPixels,glReadPixels,glCopyTexImage2D,glFramebufferTexture2D）

    OpenGL FrameBufferCopy相关Api比较 glCopyPixels,glReadPixels,glCopyTexImage2D,glFramebufferTexture2D 标题所述 ...