试了下使用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. C++ STL 双端队列deque详解

    一.解释 Deque(双端队列)是一种具有队列和栈的性质的数据结构.双端队列的元素可以从两端弹出,其限定插入和删除操作在表的两端进行. 二.常用操作: 1.头文件 #include <deque ...

  2. Java微信开发_02_本地服务器映射外网

    一.工具列表 内网穿透的相关工具有: (1)natapp 官网 :https://natapp.cn/ (2)花生壳 官网:https://console.oray.com/ (2)ngrok 官网: ...

  3. overlay 如何实现跨主机通信?- 每天5分钟玩转 Docker 容器技术(52)

    上一节我们在 host1 中运行了容器 bbox1,今天将详细讨论 overlay 网络跨主机通信的原理. 在 host2 中运行容器 bbox2: bbox2 IP 为 10.0.0.3,可以直接 ...

  4. 从零开始编写动态库文件Makefile,C++版

    这篇文章前,假设你已经看过<跟我一起写Makefile(一)>,陈皓写的那个. 对现有的一个C++动态库文件和调用程序,分别编写Makefile文件,从零开始,花了四天时间才搞清楚一半,生 ...

  5. Windows开发笔记-错误处理

    Windows函数为开发者提供了错误代码,这样当调用Windows函数失败后,可以通过查看错误代码了解错误信息.相应的错误与主调线程关联在一起,这种机制使得不同的线程能够独立运行而不会相互干扰.调用G ...

  6. Oracle dataguard 正常切换和应急切换

    oracle dataguard提供异地容灾方案,能有效的防止单点故障和提供高可用技术,这里介绍dataguard正常主备切换和应急切换(应急切换模拟主库出现问题无法还原,备库脱离dataguard接 ...

  7. GO 语言简介(网摘)

    GO 语言简介 原文出处:[陈皓 coolshell] Hello World 文件名 HELLO.GO package main //声明本文件的package名 import "fmt& ...

  8. 为什么C++中声明和定义要分开写

    现在开始写项目了,你会发现我们一般都要写一个cpp,对应的还得有一个h文件,那么为什么在C++中我们要这么做? .h就是声明,.cpp就是实现,而所谓分离式实现就是指"声明"和&q ...

  9. mysql内连接的复杂应用

    查找所有员工自入职以来的薪水涨幅情况,给出员工编号emp_noy以及其对应的薪水涨幅growth,并按照growth进行升序CREATE TABLE `employees` (`emp_no` int ...

  10. Fiddler设置代理(PC和Android)

    Fiddler设置 打开Fiddler,进入Tools--->Fiddler Options,勾选以下信息:   OK,就配置完成了.   PC端设置: 以火狐为例,打开选项--->高级 ...