three.js中的文字
1.三维文字
三维字体文字,使用的是FontLoader,字体文件通过来facetype.js生成
addCityText: function () {
var self = this;
var citys = self.citys[self.mapname];
var group = new THREE.Group();
group.name = "cityname";
//载入字体
var loader = new THREE.FontLoader();
loader.load("../assets/fonts/FZLanTingHeiS-UL-GB_Regular.json", function (font) {
//创建文字
for (city of citys) {
var textGeo = new THREE.TextGeometry(city.name, {
font: font,
size: 1.4,
height: 0.6,
weight: 'bold',
});
var txtMater = new THREE.MeshBasicMaterial({ color: 0xffffff });
var textMesh = new THREE.Mesh(textGeo, txtMater);
textMesh.name = "movealbe-element-city";
textMesh.data = city;
textMesh.rotation.z = -0.5 * Math.PI;
textMesh.position.set(city.x, city.y-4, city.z);
group.add(textMesh);
// self.objects.push(textMesh);
}
});
group.rotation.z = 0.5 * Math.PI;
self.scene.add(group);
},
2.通过canvas创建文字
createTextTexture: function (obj) {
let canvas = document.createElement("canvas");
canvas.width=obj.width||400;
canvas.height=obj.height||200;
let ctx = canvas.getContext("2d"); ctx.font = obj.font||"Bold 50px Arial";
ctx.fillStyle = obj.color||"#fff";
ctx.fillText(obj.text, 10, 100); let texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
return texture;
},
var self = this;
var material = new THREE.SpriteMaterial({
map: self.createTextTexture({
text:'文字内容',
width:700
}),
opacity: 0.8,
transparent: true
});
var particle = new THREE.Sprite(material);
particle.scale.set(25, 8, 10);
particle.position.set(-7, 13, 8);
self.scene.add(particle);
3.创建2D标签文本
示例代码:https://threejs.org/examples/#css2d_label,需要注意的是,这种方式还需要使用另外一个渲染器。那么在使用轨道控制器OrbitControls的时候,不要指明第二个参数,否则轨道控制机无法通过鼠标控制。
this.width = document.getElementById('WebGL-output').clientWidth;
this.height = document.getElementById('WebGL-output').clientHeight; //渲染器
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setClearColor('rgba(0,0,0,0.1)', 0.0);
this.renderer.setSize(this.width, this.height);
this.renderer.shadowMapEnabled = true;
document.getElementById("WebGL-output").appendChild(this.renderer.domElement); this.labelRenderer = new THREE.CSS2DRenderer();
this.labelRenderer.setSize(this.width, this.height);
this.labelRenderer.domElement.style.position = 'absolute';
this.labelRenderer.domElement.style.top = 0;
document.getElementById("WebGL-output").appendChild(this.labelRenderer.domElement);
//点
var point1 = new THREE.Sprite(new THREE.SpriteMaterial({
map: self.createLightTexure({type:3}),
opacity: 0.8,
transparent: true
}));
point1.scale.set(1.2, 1.2, 1.2);
point1.position.set(-27, 15, 25);
point1.rotation.y = 0.05 * Math.PI;
group.add(point1); var tipDiv = document.createElement('div');
tipDiv.innerHTML=`
<div class="leftTip" style="">
<image src="../assets/image/camera.png" width="30px" height="30px">
<span>1</span>
</div>
<div class="leftTip" style="margin-top:20px;">
<image src="../assets/image/importantPeople.png" width="30px" height="30px">
<span>2</span>
</div>
<div class="leftTip" style="margin-top:20px;">
<image src="../assets/image/room.png" width="30px" height="30px">
<span>3</span>
</div>
`;
tipDiv.style.marginTop = '-1em';
var tipLabel = new THREE.CSS2DObject(tipDiv);
tipLabel.position.set(-4, -3.3, 0);
point1.add(tipLabel);
three.js中的文字的更多相关文章
- 关于three.js中添加文字的方式[转]
https://blog.csdn.net/qq563969790/article/details/76584976 网上资料大部分是通过引入外部font库进行文字效果的载入,但是在实际运行的时候发现 ...
- JS事件 内容选中事件(onselect)选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。
内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...
- 实现password框中显示文字提示的方式
其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就 ...
- JS中innerHTML,innerText,value
一·.JS初学者易混淆的问题:innerHTML,innerText,value(他们和JQ的区别:JS→value,JQ→value()) 1.getElementById("a" ...
- js中NAN、NULL、undefined的区别
NaN:保留字(表明数据类型不是数字) undefined:对象属性或方法不存在,或声明了变量但从未赋值.即当你使用了对象未定的属性或者未定义的方法时或当你声明一个变量,但你确从未对其进行赋值,便对其 ...
- 聊一下JS中的作用域scope和闭包closure
聊一下JS中的作用域scope和闭包closure scope和closure是javascript中两个非常关键的概念,前者JS用多了还比较好理解,closure就不一样了.我就被这个概念困扰了很久 ...
- JS中基本window.document对象操作以及常用事件!
一.找到元素 1.document.getELementById("id"):根据id找,最多找一个. var a=document.getELementById("id ...
- js-分享107个js中的非常实用的小技巧(借鉴保存)
转载原文:http://***/Show.aspx?id=285 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:doc ...
- (转)JS中innerHTML,innerText,value
原文:http://holysonll.blog.163.com/blog/static/21413909320134111054352/ JS中innerHTML,innerText,value 2 ...
随机推荐
- 2018-计算机系机试(第二批)-D-最小差值
单点时限: 2.0 sec 内存限制: 256 MB 输入 n 个整数,输出最小差值.最小差值指所有数之间差的绝对值的最小数. 例如:3 个整数 1,2 和 6 的最小差值是 1. 输入格式 第一个数 ...
- 正则表达式andJS内存空间详细图解
http://www.runoob.com/js/js-regexp.html https://blog.csdn.net/pingfan592/article/details/55189622
- Unity存储路径
一.在项目根目录中创建Resources文件夹来保存文件 可以使用Resources.Load("文件名字,注:不包括文件后缀名");把文件夹中的对象加载出来注:此方可实现对文件实 ...
- Python全栈之路----常用模块----subprocess模块
我们经常需要通过Python去执行一条系统命令或脚本,系统的shell命令是独立于你的python进程之外的,每执行一条命令,就是发起一个新进程,通过python调用系统命令或脚本的模块在python ...
- css3实现小程序的动画
<view class="biground" > <block wx:for="{{Namelist}}" wx:key=" ...
- 20155219付颖卓《网络对抗》Exp6 信息搜集与漏洞扫描
基础问题回答 1.哪些组织负责DNS,IP的管理? 全球根服务器均由美国政府授权的ICANN统一管理,负责全球的域名根服务器.DNS和IP地址管理. 全球根域名服务器:绝大多数在欧洲和北美(全球13台 ...
- Django 数据迁移
在1.6之前, Django只支持添加新的model到数据库, 而无法编辑或修改已经存在的model. 在当时, 这些Django缺失的功能可以通过South实现. 1. 新的命令 Django 1. ...
- 自建yum仓库,分别为网络源和本地源
配置本地源 建立本地源目录 [root@qingcheng-db lgp]#mkdir /mnt/cdrom [root@qingcheng-db lgp]#mkdir /yum 挂载Centos光盘 ...
- 解决: Homestead 环境下, yarn install --no-bin-links, NPM run dev, 命令报错
执行以下命令: 1 $ rm -rf node_modules 2 $ yarn config set registry http://registry.cnpmjs.org 3 $ yarn ins ...
- Redis纠错
在Java使用Redis的过程中遇见了一个问题, redis.clients.jedis.exceptions.JedisConnectionException: Could not get a re ...