three.js中的文字

时间：2023-03-08 21:46:58

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

相关文章