three.js 文字显示不出来
试了下使用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 文字显示不出来的更多相关文章
- avalon.js 文字显示更多与收起
isShowMore: function (content) { if(content && content.length >= 124){ var shortContent = ...
- j-query应用---鼠标悬停不同文字显示不同背景图片banner动画
源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- td默认文字超出后显示..,点击tr时td文字显示完整
做项目时,产品提的需求,table表格里面,每一列限制文字超出宽度后显示省略号,等点击td时,文字显示完整,今天整理了一下代码,积累一下 备注:1.邮箱和网址,在td里面不会自动换行,需要增加word ...
- echarts柱状图坐标文字显示不完整解决方式
echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
- php 两段文本对比,不同的文字显示高亮
php 两段文本对比,不同的文字显示高亮[下面这个只能区分错误后面的..] <?php $str1 ="MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwgg ...
- js倒计时显示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
- Js控制显示、隐藏文本框中的密码
Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...
- js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
- 完美解决 向UILable 文字最后插入N张图片,支持向限制行数的UILable 最后一行插入,多余文字显示...
效果: ====直接上代码吧=== // // UILabel+StringFrame.h // QYER // // Created by qyer on 15/3/19. // Copyright ...
随机推荐
- Git版本控制系统之基本使用
最早是通过接触著名的开源社区Github了解到Git的,但一直没有系统学习过.这次下定决心从头到尾系统的学一学,也将学习过程记录于此,供大家批驳.本篇文章先从以下几个方面简单了解一下Git: Git的 ...
- 使用Travis CI自动部署Hexo博客
自从使用GitHub Pages和Hexo来发布博客之后,不得不说方便了许多,只需要几个简单的命令博客就发布了.但在不断的使用中发现每次的发布操作也挺耗时的. 我一般的操作是将平时整理好的md文件放到 ...
- MySQL grant命令使用
MySQL 赋予用户权限命令的简单格式可概括为: grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删除 数据库中所有表数据的权利. grant sele ...
- java多线程系列(六)---线程池原理及其使用
线程池 前言:如有不正确的地方,还望指正. 目录 认识cpu.核心与线程 java多线程系列(一)之java多线程技能 java多线程系列(二)之对象变量的并发访问 java多线程系列(三)之等待通知 ...
- 计蒜客模拟赛D1T2 蒜头君的树:树上节点之间最短距离和
题目链接:https://nanti.jisuanke.com/t/16446 题意: 给你一棵有n个节点的树以及每条边的长度,输出树上节点之间的最短距离和.然后进行m次操作,每次操作更改一条边的长度 ...
- webdriver
导入模块: from selenium import webdriver from selenium.common.exceptions import NoSuchElementException 选 ...
- xcode调试打印QString
xcode调试打印QString xcode内置GDB,在调试工程过程中可以通过print命令打印基本的数据类型,但像QString这样复杂类型就不行了.虽然我们可以在程序代码通过添加Qt的调试打印语 ...
- JPA的学习
JPA 1.实体注解 @Entity主键注解 @Id 主键策略@GeneratedValue(strategy=GenerationType.AUTO[IDENTITY,SEQUENCE,TAB ...
- Linux下进程描述(1)—进程控制块
进程概念介绍 进程是操作系统对运行程序的一种抽象. • 一个正在执行的程序: • 一个正在计算机上执行的程序实例: • 能分配给处理器并由处理器执行的实体: • 一个具有普以下特征的活动单元:一组指令 ...
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...