3dapp/js/units/css3dlabel.js

import { CSS3DRenderer, CSS3DObject } from 'jsm/renderers/CSS3DRenderer.js';
export default {
    // createButton: function (name,position, rotation ,click ) {

    //     const btnDiv = document.createElement('button');
    //     btnDiv.className = 'btn';
    //     btnDiv.identifierName = 'btn';
    //     btnDiv.textContent = 'Btn： Click ...';
    //     btnDiv.style.marginTop = '-1em';
    //     btnDiv.style.zIndex = 1000;
    //     btnDiv.name = name; 
    //     btnDiv.onclick = click
    //     const css2dBtn = new CSS3DObject(btnDiv);

       
    //     // css2dBtn.name = "datalabel" + i;
    //     css2dBtn.userData = { name: "datalable", id: "", url: "" }
    //     css2dBtn.position.x = position.x;
    //     css2dBtn.position.y = position.y;
    //     css2dBtn.position.z = position.z;

    //     css2dBtn.rotation.x = rotation.x;
    //     css2dBtn.rotation.y = rotation.y;
    //     css2dBtn.rotation.z = rotation.z;
    //     css2dBtn.scale.set(0.5, 0.5, 0.5); 
    //     return  css2dBtn;

    // },

    //创建标签
    // createCSSLabel: function (text, x = 0, y = 0, z = 0, className = 'label') {

    //     const labelDiv = document.createElement('div');
    //     labelDiv.className = className;
    //     labelDiv.name = "csslabeldiv"
    //     labelDiv.textContent = text;

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

    // },
    //创建标签
    createCssLabel: function (text, w, h, position,rotation,  className = 'label') {

        const labelDiv = document.createElement('div');
        labelDiv.className = className;
       
        labelDiv.name = "csslabel"
        labelDiv.textContent =  text ;
        labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
        
        var cssObject = new CSS3DObject(labelDiv);
        cssObject.position.x = position.x;
        cssObject.position.y = position.y;
        cssObject.position.z = position.z;

        cssObject.rotation.x = rotation.x;
        cssObject.rotation.y = rotation.y;
        cssObject.rotation.z = rotation.z;
      
        cssObject.scale.set(0.018, 0.018, 0.02); 
        cssObject.name = "csslabel"
        cssObject.userData = { name: "datalable", id: "", url: "" }
        return cssObject;

    },
    create3dPage: function (scene, w, h, position, rotation, url) {
        var plane = this.createPlane(
            w, h,
            position,
            rotation);
        scene.add(plane);

        var cssObject = this.createCssObject(
            w, h,
            position,
            rotation,
            url);
        scene.add(cssObject);
    },


    createPlane: function (w, h, position, rotation) {

        var material = new THREE.MeshBasicMaterial({
            color:  0x000000,
            opacity: 0.0,
            side: THREE.DoubleSide
        });

        var geometry = new THREE.PlaneGeometry(w, h);

        var mesh = new THREE.Mesh(geometry, material);

        mesh.position.x = position.x;
        mesh.position.y = position.y;
        mesh.position.z = position.z;

        mesh.rotation.x = rotation.x;
        mesh.rotation.y = rotation.y;
        mesh.rotation.z = rotation.z;
        mesh.name="plane"

        mesh.scale.set(0.003, 0.003, 0.003);
        return mesh;
    },

    createCssObject: function (w, h, position, rotation, url) {
        var iframe = document.createElement('iframe')
        iframe.src = url;
        iframe.style.width = w + 'px';
        iframe.style.height = h + 'px';
        iframe.style.border = '0px';
        //     const iframe = document.createElement('div');
        //   //  iframe.className = 'className';
        //     iframe.name = "csslabeldiv"
        //     iframe.textContent = '测试11111';

        //     iframe.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件




        var cssObject = new CSS3DObject(iframe);
        cssObject.position.x = position.x;
        cssObject.position.y = position.y;
        cssObject.position.z = position.z;

        cssObject.rotation.x = rotation.x;
        cssObject.rotation.y = rotation.y;
        cssObject.rotation.z = rotation.z;

        cssObject.scale.set(0.003, 0.003, 0.003);
        return cssObject;
    }
}