import * as THREE from 'three';
export default {
    //添加模型标签
    createRemarkLabel: function (text, x = 0, y = 0, z = 0) {


        let labelCanvas = this.getTextCanvas(text);
        const labelTexture = new THREE.Texture(labelCanvas);
        // labelTexture.magFilter = THREE.LinearFilter;
        // labelTexture.minFilter = THREE.LinearFilter;
        labelTexture.needsUpdate = true;

        const labelMaterial = new THREE.MeshBasicMaterial({
            map: labelTexture,
            side: THREE.DoubleSide
        });
        labelMaterial.transparent = true;
        const labelPlane = new THREE.PlaneGeometry(labelCanvas.width, labelCanvas.height);

        let labelMesh = new THREE.Mesh(labelPlane, labelMaterial);
        labelMesh.name = '标签'
        labelMesh.position.set(x, y, z);
        labelMesh.scale.set(0.005, 0.005, 0.005);
        labelMesh.userData = { name: "imaglable", id: "", url: "" }

        return labelMesh;


    },
    getTextCanvas1: function (text) {
        var width = text.length * 12, height = 16;
        var canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext('2d');


        var devicePixelRatio = window.devicePixelRatio || 1;
        var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
            ctx.mozBackingStorePixelRatio ||
            ctx.msBackingStorePixelRatio ||
            ctx.oBackingStorePixelRatio ||
            ctx.backingStorePixelRatio || 1;
        var ratio = devicePixelRatio / backingStoreRatio;
        // debugger 
        canvas.width = canvas.width * ratio;
        canvas.height = canvas.height * ratio;
        width = canvas.width;
        height = canvas.height;
        ctx.scale(ratio, ratio);
        ctx.translate(0.5, 0.5);
        ctx.lineWidth = 1;
        ctx.moveTo(2.5, 2);
        ctx.lineTo(98.5, 2);
        ctx.lineTo(98.5, 98);
        ctx.lineTo(2.5, 98);
        ctx.lineTo(2.5, 2);
        ctx.stroke();



        ctx.fillStyle = '#CfCfC3';
        ctx.fillRect(0, 0, width, height);
        ctx.font = 10 + 'px " bold ';
        ctx.fillStyle = '#000000';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        ctx.fillText(text, width / 2 / ratio, height / 2 / ratio);
        return canvas;
    },
    getTextCanvas: function (text) {
        var width = text.length * 24, height = 32;
        var canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext('2d');

        ctx.fillStyle = '#CfCfC3';
        ctx.fillRect(0, 0, width, height);
        ctx.font = 20 + 'px " bold ';
        ctx.fillStyle = '#000000';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
         
        ctx.fillText(text, width / 2, height / 2);
        return canvas;
    },
    //普通标签
    addLabel: async function (parent, x = 0, y = 0, z = 0, className = 'label') {
        console.log("parent.name=", parent.name)
        if (!parent.name) {

            return;
        }
        console.log("parent.name2=", parent.name)
        let item = await getlabel(parent.name);
        console.log("item2=", item)
        // debugger
        if (!item) return;
        console.log("item2=", item)
        const labelDiv = document.createElement('div');
        labelDiv.className = className;
        labelDiv.name = "csslabel";
        labelDiv.textContent = item.text;
        labelDiv.style.marginTop = '-1em';

        labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
        const css2DLabel = new CSS2DObject(labelDiv);
        css2DLabel.position.set(x, y, z);
        css2DLabel.name = "datalabel"
        css2DLabel.userData = { name: "datalable", id: "", url: "" }
        // css2DLabelList.add(css2DLabel);
        if (parent) {
            parent.add(css2DLabel);

        } else {
            window.scene.add(css2DLabel);
        }


    }
}