1.三维文字

  三维字体文字,使用的是FontLoader,字体文件通过来facetype.js生成

  1. addCityText: function () {
  2. var self = this;
  3. var citys = self.citys[self.mapname];
  4. var group = new THREE.Group();
  5. group.name = "cityname";
  6. //载入字体
  7. var loader = new THREE.FontLoader();
  8. loader.load("../assets/fonts/FZLanTingHeiS-UL-GB_Regular.json", function (font) {
  9. //创建文字
  10. for (city of citys) {
  11. var textGeo = new THREE.TextGeometry(city.name, {
  12. font: font,
  13. size: 1.4,
  14. height: 0.6,
  15. weight: 'bold',
  16. });
  17. var txtMater = new THREE.MeshBasicMaterial({ color: 0xffffff });
  18. var textMesh = new THREE.Mesh(textGeo, txtMater);
  19. textMesh.name = "movealbe-element-city";
  20. textMesh.data = city;
  21. textMesh.rotation.z = -0.5 * Math.PI;
  22. textMesh.position.set(city.x, city.y-4, city.z);
  23. group.add(textMesh);
  24. // self.objects.push(textMesh);
  25. }
  26. });
  27. group.rotation.z = 0.5 * Math.PI;
  28. self.scene.add(group);
  29. },

2.通过canvas创建文字

  1. createTextTexture: function (obj) {
  2. let canvas = document.createElement("canvas");
  3. canvas.width=obj.width||400;
  4. canvas.height=obj.height||200;
  5. let ctx = canvas.getContext("2d");
  6.  
  7. ctx.font = obj.font||"Bold 50px Arial";
  8. ctx.fillStyle = obj.color||"#fff";
  9. ctx.fillText(obj.text, 10, 100);
  10.  
  11. let texture = new THREE.Texture(canvas);
  12. texture.needsUpdate = true;
  13. texture.wrapS = THREE.RepeatWrapping;
  14. texture.wrapT = THREE.RepeatWrapping;
  15. return texture;
  16. },
  1. var self = this;
  2. var material = new THREE.SpriteMaterial({
  3. map: self.createTextTexture({
  4. text:'文字内容',
  5. width:700
  6. }),
  7. opacity: 0.8,
  8. transparent: true
  9. });
  10. var particle = new THREE.Sprite(material);
  11. particle.scale.set(25, 8, 10);
  12. particle.position.set(-7, 13, 8);
  13. self.scene.add(particle);

3.创建2D标签文本

  示例代码:https://threejs.org/examples/#css2d_label,需要注意的是,这种方式还需要使用另外一个渲染器。那么在使用轨道控制器OrbitControls的时候,不要指明第二个参数,否则轨道控制机无法通过鼠标控制。

  1. this.width = document.getElementById('WebGL-output').clientWidth;
  2. this.height = document.getElementById('WebGL-output').clientHeight;
  3.  
  4. //渲染器
  5. this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  6. this.renderer.setClearColor('rgba(0,0,0,0.1)', 0.0);
  7. this.renderer.setSize(this.width, this.height);
  8. this.renderer.shadowMapEnabled = true;
  9. document.getElementById("WebGL-output").appendChild(this.renderer.domElement);
  10.  
  11. this.labelRenderer = new THREE.CSS2DRenderer();
  12. this.labelRenderer.setSize(this.width, this.height);
  13. this.labelRenderer.domElement.style.position = 'absolute';
  14. this.labelRenderer.domElement.style.top = 0;
  15. document.getElementById("WebGL-output").appendChild(this.labelRenderer.domElement);
  1. //点
  2. var point1 = new THREE.Sprite(new THREE.SpriteMaterial({
  3. map: self.createLightTexure({type:3}),
  4. opacity: 0.8,
  5. transparent: true
  6. }));
  7. point1.scale.set(1.2, 1.2, 1.2);
  8. point1.position.set(-27, 15, 25);
  9. point1.rotation.y = 0.05 * Math.PI;
  10. group.add(point1);
  11.  
  12. var tipDiv = document.createElement('div');
  13. tipDiv.innerHTML=`
  14. <div class="leftTip" style="">
  15. <image src="../assets/image/camera.png" width="30px" height="30px">
  16. <span>1</span>
  17. </div>
  18. <div class="leftTip" style="margin-top:20px;">
  19. <image src="../assets/image/importantPeople.png" width="30px" height="30px">
  20. <span>2</span>
  21. </div>
  22. <div class="leftTip" style="margin-top:20px;">
  23. <image src="../assets/image/room.png" width="30px" height="30px">
  24. <span>3</span>
  25. </div>
  26. `;
  27. tipDiv.style.marginTop = '-1em';
  28. var tipLabel = new THREE.CSS2DObject(tipDiv);
  29. tipLabel.position.set(-4, -3.3, 0);
  30. point1.add(tipLabel);

three.js中的文字的更多相关文章

  1. 关于three.js中添加文字的方式[转]

    https://blog.csdn.net/qq563969790/article/details/76584976 网上资料大部分是通过引入外部font库进行文字效果的载入,但是在实际运行的时候发现 ...

  2. JS事件 内容选中事件(onselect)选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。

    内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...

  3. 实现password框中显示文字提示的方式

    其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就 ...

  4. JS中innerHTML,innerText,value

    一·.JS初学者易混淆的问题:innerHTML,innerText,value(他们和JQ的区别:JS→value,JQ→value()) 1.getElementById("a" ...

  5. js中NAN、NULL、undefined的区别

    NaN:保留字(表明数据类型不是数字) undefined:对象属性或方法不存在,或声明了变量但从未赋值.即当你使用了对象未定的属性或者未定义的方法时或当你声明一个变量,但你确从未对其进行赋值,便对其 ...

  6. 聊一下JS中的作用域scope和闭包closure

    聊一下JS中的作用域scope和闭包closure scope和closure是javascript中两个非常关键的概念,前者JS用多了还比较好理解,closure就不一样了.我就被这个概念困扰了很久 ...

  7. JS中基本window.document对象操作以及常用事件!

    一.找到元素 1.document.getELementById("id"):根据id找,最多找一个. var a=document.getELementById("id ...

  8. js-分享107个js中的非常实用的小技巧(借鉴保存)

    转载原文:http://***/Show.aspx?id=285 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:doc ...

  9. (转)JS中innerHTML,innerText,value

    原文:http://holysonll.blog.163.com/blog/static/21413909320134111054352/ JS中innerHTML,innerText,value 2 ...

随机推荐

  1. 蓝屏代码PAGE_FAULT_IN_NONPAGED_AREA的解决方法

    就在昨天晚上,小王同学的电脑继1803更新后第4次蓝屏了,原本蓝屏后自动重启后就会恢复正常,然而天真的我太低估了微软的实力.蓝屏-重启-蓝屏-重启无限循环 当然,重启几次就进入了高级模式 高级模式 进 ...

  2. 虚拟机中ubuntu不能联网问题的解决——NAT方式

    困惑我多时的Ubuntu联网问题终于解决啦,开心!!!现记录如下,方便日后取用. 可先直接尝试第3步,若不行,则走完全程. 1.查看/设置下NAT的网络 打开VMware Workstation, 点 ...

  3. Spring源码学习笔记2

    1.默认标签的解析 对四种不同标签的解析 private void parseDefaultElement(Element ele, BeanDefinitionParserDelegate dele ...

  4. DG_Check检测

    DG_Check检测 1) all 查询备库角色(确认主备关系)set linesize 140 col dbid for 9999999999 col name for a10 col databa ...

  5. pagerank算法在数学模型中的运用(有向无环图中节点排序)

    一.模型介绍 pagerank算法主要是根据网页中被链接数用来给网页进行重要性排名. 1.1模型解释 模型核心: a. 如果多个网页指向某个网页A,则网页A的排名较高. b. 如果排名高A的网页指向某 ...

  6. 《Spring实战》读书笔记——Spring简介

    欢迎大家关注我的微信公众号,共同交流Java相关技术! 使用Spring的目的 Spring是为了解决企业级应用开发的复杂性而创建的,使用Spring可以让简单的JavaBean实现之前只有EJB才能 ...

  7. Java基于opencv—矫正图像

    更多的时候,我们得到的图像不可能是正的,多少都会有一定的倾斜,就比如下面的 我们要做的就是把它们变成下面这样的 我们采用的是寻找轮廓的思路,来矫正图片:只要有明显的轮廓都可以采用这种思路 具体思路: ...

  8. PTA9

    这个作业属于哪个课程 C语言程序设计2 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/software-engineering-class2-2018/ ...

  9. uwp应用在debug模式下运行正常,编译为release版本的时候抛出异常

    原因是在代码中使用了dynamic关键字,导致release时.net native优化了代码造成元数据丢失 所以在代码中要尽量不用dynamic.

  10. java8_api_日期时间

    日期时间处理    Date类,其中很多方法已经不用了    Calendar类,java.util包中的抽象类        Date类,其对象代表即时时间,存储的是从19700101000000距 ...