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);