Question

我需要在场景中拥有超过400个文本对象。每个文本对象是带有两位数的十进制数的一个句子。 Echa文本正在从JSON文件中读取。每个文本对象在场景中都有一个位置（x，y，z）。

使用我所拥有的基本场景，加载每个文本需要花费很多时间。

代码在这里：

function setText(text, textColor, textSize, positionX, positionY, positionZ) {        
    var  textGeo = new THREE.TextGeometry(text, {
        height: 0,
        curveSegments: 4,
        font: "helvetiker",
        //font: "optimer",
        weight: "normal",
        style: "normal",
        size: textSize,
        //
        //bevelThickness: bevelThickness,
        //bevelSize: bevelSize,
        //bevelEnabled: bevelEnabled,
        material: 0,
        extrudeMaterial: 1
    });

    textGeo.computeBoundingBox();
    textGeo.computeVertexNormals();

    var textMaterial = new THREE.MeshBasicMaterial({ 
        shading: THREE.FlatShading, 
        transparent: true,
        depthWrite: false,
        transparent: true,
        needsUpdate: true,
        color: textColor, 
        side:THREE.DoubleSide
    }); 

    var text = new THREE.Mesh(textGeo, textMaterial);
    text.position.x = positionX;
    text.position.y = positionY;
    text.position.z = positionZ;
    return text;
}

文本示例：

"model", "metamodel", "syntax", "sentence" ...

数字示例：

你能帮帮我吗？谢谢！

编辑：新代码在这里：

    function createTextGeo(textSize, text) {
        var tGeo = new THREE.TextGeometry(text, {
            height: 0,
            curveSegments: 4,
            font: "helvetiker",
            weight: "normal",
            style: "normal",
            size: textSize,
            material: 0,
            extrudeMaterial: 1
        });

        tGeo.computeBoundingBox();
        tGeo.computeVertexNormals();
        return tGeo;
    }

    function createGeoMaterial(textColor) {
        var tMat = new THREE.MeshBasicMaterial({
            color: textColor,
        });
        return tMat;
    }

    function setText(text, textColor, tMat, tGeo, X, Y, Z) {
        tMat.color = textColor;
        tGeo.text = text;

        var text = new THREE.Mesh(tGeo, tMat);
        text.position.set( X, Y, Z );
        return text;
    }

    function createTexts(value) {
        var text;
        var mesh;
        var x = 5;
        var y = 8;
        var z = 10;
        var keyColor = new THREE.Color('#0B0B61');
        var tMat = createGeoMaterial(keyColor);
        var tGeo = createTextGeo(5, "");

        for (var i = 0; i < value; i++) {
            mesh = setText(i, keyColor, tMat, tGeo, x * i, y * i, z * i);
            scene.add(mesh);
        }
    }

Three.js中的TextGeometry性能

0 个答案: