Untitled

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="container">
    </div>


    <script type="text/javascript" src="three.min.js"></script>
    <script type="text/javascript" src="TrackballControls.js"></script>
    <script type="text/javascript" src="CSS3DRenderer.js"></script>

    <script>
        var camera = null;
        var scene = null;
        var sceneMAP = null;
        var renderer = null;
        var rendererMAP = null;

        camera = new THREE.PerspectiveCamera(45, 1000 / 1000, 1, 100000);
        camera.position.set(0, 0, 0);

        renderer = new THREE.WebGLRenderer({
            alpha: true
        });
        renderer.setSize(1000, 1000);
        renderer.domElement.style.position = 'absolute';
        document.getElementById("container").appendChild(renderer.domElement);
        renderer.setClearColor(0xffffff, 1);


        rendererMAP = new THREE.CSS3DRenderer();
        rendererMAP.setSize(1000, 1000);
        rendererMAP.domElement.style.position = 'absolute';
        document.getElementById("container").appendChild(rendererMAP.domElement);

        controls = new THREE.TrackballControls(camera);
        controls.rotateSpeed = 0.5;
        controls.addEventListener('change', animate);


        scene = new THREE.Scene();

        var element = document.createElement('div');
        element.innerHTML = 'Plain text inside a div.';
        element.style.background = "#0094ff";
        element.style.fontSize = "2em";
        element.style.color = "white";
        element.style.padding = "2em";
        var div = new THREE.CSS3DObject(element);
        div.position.x = 8;
        div.position.y = 9;
        div.position.z = 185;
        scene.add(div);

        function animate() {
            requestAnimationFrame(animate);
            rendererMAP.render(scene, camera);
            renderer.render(scene, camera);
            controls.update();
        }
    </script>

</body>

</html>