添加文字需要用到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. BaseAdapter的抽取

    为了更方便高效的使用BaseAdapter,特意抽取了一下,下面是简单的结构图: 需要4个类: [MyBaseAdapter3]: public abstract class MyBaseAdapte ...

  2. stm32 usart 异步传输示例

    STM32F103xE的USART异步数据传输示例 USART全称Universal Synchronous/Asynchronous Receiver/Transmitter,是一种可以进行同步/异 ...

  3. 数据结构与算法 Big O 备忘录与现实

    不论今天的计算机技术变化,新技术的出现,所有都是来自数据结构与算法基础.我们需要温故而知新.        算法.架构.策略.机器学习之间的关系.在过往和技术人员交流时,很多人对算法和架构之间的关系感 ...

  4. org.springframework.context.ApplicationContextAware使用理解

    一.这个接口有什么用? 当一个类实现了这个接口(ApplicationContextAware)之后,这个类就可以方便获得ApplicationContext中的所有bean.换句话说,就是这个类可以 ...

  5. jquery如何实现（textarea） placeholder自动换行？

    思路:利用文本框的聚焦和失焦事件 1.HTML结构 <textarea id="text1"></textarea> 2.js方法 <script&g ...

  6. 实现bootstrap布局的input输入框中的图标点击功能

    使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...

  7. php中用foreach改变数组的值的问题

    翻到PHP文档的foreach那页这样写道: “foreach 语法结构提供了遍历数组的简单方式.foreach 仅能够应用于数组和对象,如果尝试应用于其他数据类型的变量,或者未初始化的变量将发出错误 ...

  8. childViewController 小计

    设置childViewcontroller Unbalanced calls to begin/end appearance transitions for 以上报错 需要添加 transitionF ...

  9. UIView

    //command+R   运行 //command+.   停止 //command+B   预编译 //command+1.2.3  模拟器大小 //command+shift+h  home键 ...

  10. 【原】iOS：手把手教你发布代码到CocoaPods(Trunk方式)

    Change Log: 2015.08.20 - 添加podspec文件更新方法 2015.08.19 - 首次发布 概述 关于CocoaPods的介绍不在本文的主题范围内,如果你是iOS开发者却不知 ...