threejs 3维中的2d平面

使用html平面

    function sendText()
    {
        alert("sendtext");
    }
 
 var string2 =""+
        "切换"+
        "正常"+
        "停机"+
        "报警"+
    "";
 
 var string3 = ""+
        "数据展示"+
        "报警设备:10"+
        "录像设备:20 小时"+
        "设备个数:16 "+
    "";

初始化

 function init() {

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a CSS3DRenderer
        renderer = new THREE.CSS3DRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
//        renderer.domElement.style.position = 'absolute';
//        renderer.domElement.style.top = 0;

        // position and point the camera to the center of the scene
        camera.position.x = 500;
        camera.position.y = 600;
        camera.position.z = 800;
        camera.lookAt(scene.position);

        // add the output of the renderer to the html element
        document.body.appendChild(renderer.domElement);
        var cssElement = createCSS3DObject(string2);

        cssElement.position.set(100, 100, 100);
        scene.add(cssElement);
        var cssElement2 = createCSS3DObject(string3);
        cssElement2.position.set(100, -100, 300);
        scene.add(cssElement2);

        // call the render function, after the first render, interval is determined
        // by requestAnimationFrame
        render();
    }

渲染

实际上3维里面点击2维的按钮，是可以产生效果的，点击后面平面中的任何按钮，可以弹出sendtext 弹窗

资源下载

通过下方下载资源代码