three.js 文字无法显示问题的解决
来源:互联网 发布:淘宝直播预告已过期 编辑:程序博客网 时间:2024/05/29 19:04
想怼一下webgl,试了下使用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
打开这个地址后,成功的进入到了这个页面,虽然不再报错了,但是仍然没有显示文字。。。这是为什么呢,仔细看了一下代码,发现我把 renderer.render(scene, camera);
这行代码写在了loader.load
的外面,loader.load
是异步函数,渲染写在loader.load
的外面的话,就会变成在字体成功加载出来之前,就进行了渲染,所以当然是渲染不出来的,把渲染写在loader.load
里面或者把loader.load
用async/await
写成同步函数就可以了。
(参考回答地址:https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local)
- three.js 文字无法显示问题的解决
- 解决three.js加载外部obj文件在chrome浏览器中无法显示的问题
- 解决ToolBar中的menu无法同时显示图标和文字的问题
- js向上滚动文字问题的解决
- web dynpro无法显示问题的解决
- 解决chm 无法显示网页的问题
- 解决layout graphic 无法显示的问题
- 解决favicon.ico无法显示的问题
- 解决nginx无法显示图片的问题
- 解决easyui无法显示datagrid的问题
- 解决IE8下圆角无法显示的问题
- Three.js无法显示三维外部文件问题解决方案
- Qt Qtableview 无法文字居中显示的问题
- 解决ListView中TextView文字无法正常居中的问题
- Three.js显示中文字体
- 解决TabContainer选项卡文字显示不全的问题
- 解决select选项内容过长,文字显示不全的问题
- 自定义TextView解决超长文字显示的问题
- Linux如何修改文件权限
- 使用TCP协议连续传输大量数据时,是否会丢包,应如何避免
- 1046
- Luogu 3807(Lucas定理)
- js的跨域问题
- three.js 文字无法显示问题的解决
- 用MFC创建一个ping的小程序
- Struts2文件下载
- MacOS安装anaconda以及Tensorflow步骤
- Day12_Java_作业
- python爬取豆瓣电影top250
- java中this的作用!
- GalaxyOJ-1003 (好题+STL)
- 文章标题