Javascript 使css3d渲染平面在3JS中充当地板？_Javascript_Three.js

Javascript 使css3d渲染平面在3JS中充当地板？

javascript three.js

Javascript 使css3d渲染平面在3JS中充当地板？,javascript,three.js,Javascript,Three.js,我的要求是将css3d渲染平面用作地板。三维立方体应该在平面的顶部。下面我附上了我试过的代码。平面和立方体共享相同的场景和相机。但是渲染是不同的。但是我不能把三维立方体放在平面的顶部，平面和立方体的旋转是不同的 <!DOCTYPE html> <html lang="en"> <head> <title>3JS CODE</title> <meta charset="utf-

我的要求是将css3d渲染平面用作地板。三维立方体应该在平面的顶部。下面我附上了我试过的代码。平面和立方体共享相同的场景和相机。但是渲染是不同的。但是我不能把三维立方体放在平面的顶部，平面和立方体的旋转是不同的

    <!DOCTYPE html>
      <html lang="en">
      <head>
      <title>3JS CODE</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
      <style>
        body {
            font-family: Monospace;
            background-color: #f0f0f0;
            margin: 0px;
            overflow: hidden;
        }
      </style>
      </head>
      <body>

    <script src="js/three.js"></script>

    <script src="js/controls/TrackballControls.js"></script>
    <script src="js/renderers/CSS3DRenderer.js"></script>
    <script src="js/libs/stats.min.js"></script>
    <script>

        var HtmlElement = function ( id, x, y, z, rx ) {
            var div = document.createElement( 'div' );
            div.innerHTML = "Hello";
            div.id = id; //'googleMap';
            div.style.width = '1200px';
            div.style.height = '950px';
            div.style.backgroundColor = 'blue';

            var object = new THREE.CSS3DObject( div );
            object.position.set( x, y, z );
            object.rotation.x = rx;
            return object;
        };

    </script>

    <script>

        var container, stats;
        var camera, controls, mapScene, group, renderer1,renderer2;
        var objects = [];

        init();
        animate();

        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 5000 );
            camera.position.z = 1000;
            camera.position.set(0.18348775328760136, -334.5971567493426, 800.8398185862801);



            controls = new THREE.TrackballControls( camera );
            controls.rotateSpeed = 3.0;
            controls.zoomSpeed = 2.2;
            controls.panSpeed = 2.8;
            controls.noZoom = false;
            controls.noPan = false;
            controls.staticMoving = true;
            controls.dynamicDampingFactor = 1.3;


            mapScene = new THREE.Scene();

            // scene.background = new THREE.Color( 0xf0f0f0 );

            group = new THREE.Group();

            var mapObject = new HtmlElement( 'googleMap', 0, 0, 240, 270 );
            group.add( mapObject );


            ///////////////
            var geometry = new THREE.BoxGeometry( 200, 200, 200 );
            for ( var i = 0; i < geometry.faces.length; i += 2 ) {
                    var hex = Math.random() * 0xffffff;
                    geometry.faces[ i ].color.setHex( hex );
                    geometry.faces[ i + 1 ].color.setHex( hex );
            }
            var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );
            cube = new THREE.Mesh( geometry, material );
            cube.position.x = 0;
            cube.position.y = -300;
            cube.position.z = 500;

            group.add( cube );


            mapScene.add( group );

            // renderer
            renderer1 = new THREE.CSS3DRenderer();
            renderer1.setSize( window.innerWidth, window.innerHeight );

            renderer1.domElement.style.position = 'absolute';
            renderer1.domElement.style.top = 0;

            container.appendChild( renderer1.domElement );

            renderer2 = new THREE.WebGLRenderer( { antialias: true } );
            renderer2.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer2.domElement );


            stats = new Stats();
            container.appendChild( stats.dom );

            window.addEventListener( 'resize', onWindowResize, false );

            render();
            // initMap();

        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer1.setSize( window.innerWidth, window.innerHeight );
            renderer2.setSize( window.innerWidth, window.innerHeight );
        }

        function animate() {
            requestAnimationFrame( animate );
            render();
            stats.update();
        }

        function render() {         
            controls.update();
            renderer1.render( mapScene, camera );
            renderer2.render( mapScene, camera );
        }

    </script>
</body>
</html>


3JS代码
身体{
字体系列：Monospace；
背景色：#f0；
边际：0px；
溢出：隐藏；
}
var HtmlElement=函数（id、x、y、z、rx）{
var div=document.createElement（'div'）；
div.innerHTML=“你好”；
div.id=id；//“谷歌地图”；
div.style.width='1200px'；
div.style.height='950px'；
div.style.backgroundColor='蓝色'；
var对象=新的三个.CSS3DObject（div）；
对象位置集合（x，y，z）；
object.rotation.x=rx；
返回对象；
};
var容器，stats；
var摄影机、控件、贴图场景、组、渲染器1、渲染器2；
var对象=[]；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，0.15000）；
摄像机位置z=1000；
相机位置设置（0.18348775328760136，-334.5971567493426800.8398185862801）；
控件=新的三个轨迹球控件（摄像头）；
controls.rotateSpeed=3.0；
controls.zoomSpeed=2.2；
控制点速度=2.8；
controls.noZoom=false；
controls.noPan=false；
controls.staticMoving=true；
控制。动态阻尼系数=1.3；
mapsecene=new THREE.Scene（）；
//scene.background=新的三种颜色（0xF0）；
组=新的三个。组（）；
var-mapObject=newHtmleElement（'googleMap'，0,0,240,270）；
添加（mapObject）；
///////////////
var geometry=新的三个.BoxGeometry（200200200）；
对于（变量i=0；i


以下是输出
不关心数据的深度缓冲区。它没有关于深度缓冲区甚至深度测试的线索。CSS对象的顺序可以由定义。

您尝试混合两种完全不同的技术，但它们不会以这种方式相互作用。


但你仍然可以让它工作
为此，必须将元素的z索引定义为低于元素的z索引，以便WebGLRenderer
在css3drender
前面绘制。必须为WebGLRenderer
启用进一步的透明度：
renderer1 = new THREE.CSS3DRenderer();
renderer1.setSize( window.innerWidth, window.innerHeight );
renderer1.domElement.style.position = 'absolute';
renderer1.domElement.style.zIndex = 0;
renderer1.domElement.style.top = 0;
container.appendChild( renderer1.domElement );

renderer2 = new THREE.WebGLRenderer( { antialias: true, alpha:true } );
renderer2.setSize( window.innerWidth, window.innerHeight );
renderer2.domElement.style.position = 'absolute';
renderer2.domElement.style.zIndex = 1;
renderer2.domElement.style.top = 0;
container.appendChild( renderer2.domElement );

然后必须确保WebGLRenderer
处理CSS3DObject。从技术上讲，这是不可能做到的。但是你可以欺骗这个系统。
您可以渲染一个完全透明的平面，在相同的位置具有相同的大小，如WebGLRenderer
中的CSS3DObject
：
var HtmlElement = function ( id, x, y, z, w, h ) {
    var div = document.createElement( 'div' );
    div.innerHTML = "Hello";
    div.id = id; //'googleMap';
    div.style.width = w + 'px';
    div.style.height = h + 'px';
    div.style.backgroundColor = 'blue';

    var object = new THREE.CSS3DObject( div );
    object.position.set( x, y, z );
    return object;
};

var WebGlObject = function ( x, y, z, w, h ) {
    var material = new THREE.MeshBasicMaterial({
        color: 0x0000000,
        opacity: 0.0,
        side: THREE.DoubleSide
    });
    var geometry = new THREE.PlaneGeometry(w, h);
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.x = x;
    mesh.position.y = y;
    mesh.position.z = z;
    return mesh;
};

var mapObject = HtmlElement('googleMap', 0, 0, 0, 800, 800);
var planeMesh = WebGlObject(             0, 0, 0, 800, 800);


请参见基于问题代码的示例：

var HtmlElement=函数（id，x，y，z，w，h）{
var div=document.createElement（'div'）；
//div.innerHTML=“你好”；
div.id=id；//“谷歌地图”；
div.style.width=w+‘px’；
div.style.height=h+‘px’；
div.style.backgroundColor='浅蓝色'；
div.style.color=“红色”；
div.style.fontSize=“200px”；
div.style.textAlign=“中心”；
var iframe=document.createElement（“iframe”）；
setAttribute（“src”https://www.google.com/maps/embed");
iframe.style.width=w+“px”；
iframe.style.height=h+“px”；
子类附件（iframe）；
var object=new THREE.CS