three.js中的文字

Posted 2021-02-02 FreeSaber

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