试了下使用three.js加载文字,首先是报了一个这样的错误:

Cross origin requests are only supported for HTTP.”

当时很懵逼,去网上查了查,发现是因为我直接用浏览器打开了这个html文件,url的协议是file协议,无法使用loader.load的方式加载出字体文件,只能使用http,https等等协议,所以不能直接用浏览器打开这个文件,这里就要使用http-server了。

使用npm install -g http-server下载http-server,

然后再在项目目录下输入http-server,就可以在本地的端口下运行了,eg:localhost:8080/helloworld.html

(原回答地址:https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local)

打开这个地址后,成功的进入到了这个页面,虽然不再报错了,但是仍然没有显示文字。。。这是为什么呢,仔细看了一下代码,发现我把

renderer.render(scene, camera);

这行代码写在了loader.load的外面,loader.load是异步函数,渲染写在loader.load的外面的话,就会变成在字体成功加载出来之前,就进行了渲染,所以当然是渲染不出来的,把渲染写在loader.load里面或者把loader.load用async/await写成同步函数就可以了。

three.js 文字显示不出来的更多相关文章

  1. avalon.js 文字显示更多与收起

    isShowMore: function (content) { if(content && content.length >= 124){ var shortContent = ...

  2. j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

    源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  3. td默认文字超出后显示..,点击tr时td文字显示完整

    做项目时,产品提的需求,table表格里面,每一列限制文字超出宽度后显示省略号,等点击td时,文字显示完整,今天整理了一下代码,积累一下 备注:1.邮箱和网址,在td里面不会自动换行,需要增加word ...

  4. echarts柱状图坐标文字显示不完整解决方式

    echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...

  5. php 两段文本对比,不同的文字显示高亮

    php 两段文本对比,不同的文字显示高亮[下面这个只能区分错误后面的..]   <?php $str1 ="MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwgg ...

  6. js倒计时显示

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  7. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  8. js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  9. 完美解决 向UILable 文字最后插入N张图片,支持向限制行数的UILable 最后一行插入,多余文字显示...

    效果: ====直接上代码吧=== // // UILabel+StringFrame.h // QYER // // Created by qyer on 15/3/19. // Copyright ...

随机推荐

  1. HDU5727 Necklace(二分图匹配)

    Problem Description SJX has 2*N magic gems. N of them have Yin energy inside while others have Yang ...

  2. zabbix前台jsrpc注入

    zabbix是一个开源的企业级性能监控解决方案. 官方网站:http://www.zabbix.com zabbix的jsrpc的profileIdx2参数存在insert方式的SQL注入漏洞,攻击者 ...

  3. FastDFS安装和配置,整合Nginx-1.13.3

    目录: 一:下载FastDFS  二:安装FastDFS 三:配置 四:整合Nginx和FastDFS FastDFS is an open source high performance distr ...

  4. eclipse导入lombok后打不开(如果你的lombok不是最新的,那就来下载最新的)

    如果你的不是最新的,去这里下载最新版的,先点击左上角的Download红方块,然后再点击下图中的位置 https://projectlombok.org/ 下载完后把eclipse关掉,双击下载的ja ...

  5. python实战第一天-pymysql模块并练习

    操作系统 Ubuntu 15.10 IDE & editor JetBrains PyCharm 5.0.2 ipython3 Python版本 python-3.4.3 安装pymysql模 ...

  6. ### 七种SQL JOINS

    七种SQL JOINS 1.SELECT FROM TABLEA A LEFT JOIN TABLEB B ON A.Key=B.Key 2.SELECT FROM TABLEA A RIGHT JO ...

  7. Luogu P3371 【模板】单源最短路径

    题目描述 如题,给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 输入输出格式 输入格式: 第一行包含三个整数N.M.S,分别表示点的个数.有向边的个数.出发点的编号. 接下来M行每行包含三 ...

  8. js单页hash路由原理与应用实战

    什么是路由? 通俗点说,就是不同的URL显示不同的内容 什么是单页应用? 单页,英文缩写为SPA( Single Page Application),就是把各种功能坐在一个页面内. 那所谓的单页路由应 ...

  9. SpringMVC实现垂直搜索引擎

    本篇博客是在上一篇<Lucene搜索引擎+HDFS+MR完成垂直搜索>的基础上,在数据收集之后的JSP/Servlet方面,换为SpringMVC框架来实现. 借助SpringMVC技术完 ...

  10. MYSQL事务及存储引擎对比

    Innodb支持事务,而myisam不支持事务. 事务的定义: 当多个用户访问同一份数据时,一个用户在更改数据的过程中可能有其他用户同时发起更改请求,为保证数据的更新从一个一致性状态变更为另一个一致性 ...