three.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);},

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

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