Three.js Properly Blending Css3d And Webgl

December 27, 2023 Post a Comment

I am trying to combine webgl and css3d scenes so that the objects in the two scenes properly blend together. I am following the pattern described here: and have created a simple e

Solution 1:

The link in the comment was helpful. As that solution mentions, setting alpha to true solves the issue of getting the css3d objects to render using r67. Making the webGl background transparent solves the problem of the css3d objects disappearing when panning around.

The solution mentioned in the link however adds both the webgl and css3d dom as child elements of the document. This approach did not work in my case. I find it necessary to still have the webgl dom as a child of the css3d dom for the cube to blend correctly with the planes when it is both in front of and behind those objects.

Working code below:

<!DOCTYPE html><html><head><metacharset="utf-8"><style>body {
                background-color: #ffffff;
                margin: 0;
                overflow: hidden;
            }

        </style></head><body><scriptsrc="../build/three.min.js"></script><scriptsrc="js/controls/TrackballControls.js"></script><scriptsrc="js/renderers/CSS3DRenderer.js"></script><script>var camera, sceneGl, rendererGl;
var sceneCss, rendererCss;
var controls;

init();
animate();

functioninit() {

    camera = newTHREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(200, 200, 200);

    controls = newTHREE.TrackballControls(camera);

    sceneGl = newTHREE.Scene();
    sceneCss = newTHREE.Scene();

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

    var xpos = [50, -10, 30, 70, 110];
    var ypos = [60, -40, 0, 40, 80];
    var zpos = [-30, -50, 0, 50, 100];

    for (var i = 0; i < 5; i++) {

        var element = document.createElement('div');
        element.style.width = '100px';
        element.style.height = '100px';
        element.style.opacity = 1.0;
        element.style.background = newTHREE.Color(Math.random() * 0xff0000).getStyle();

        var object = newTHREE.CSS3DObject(element);
        object.position.x = xpos[i];
        object.position.y = ypos[i];
        object.position.z = zpos[i];
        object.rotation.x = Math.PI / (i + 5);
        object.rotation.y = Math.PI / (21 - 2 * i);
        object.rotation.z = Math.PI / (3 * i + 25);
        object.scale.x = i / 12 + 0.5;
        object.scale.y = 1 / (12 - i) + 0.5;
        sceneCss.add(object);


        var geometry = newTHREE.PlaneGeometry(100, 100);
        var mesh = newTHREE.Mesh(geometry, material);
        mesh.position.copy(object.position);
        mesh.rotation.copy(object.rotation);
        mesh.scale.copy(object.scale);
        sceneGl.add(mesh);

    }


    var boxGeom = newTHREE.CubeGeometry(60, 60, 60);

    var cubeMaterial = newTHREE.MeshBasicMaterial({
        color: 0x05009A,
        shading: THREE.FlatShading,
        side: THREE.DoubleSide
    });

    var cube = newTHREE.Mesh(boxGeom, cubeMaterial);
    cube.position.copy(newTHREE.Vector3(100, 75, 50));
    cube.rotation.copy(Math.PI / 6);

    sceneGl.add(cube);


    rendererCss = newTHREE.CSS3DRenderer();
    rendererCss.setSize(window.innerWidth, window.innerHeight);
    rendererCss.domElement.style.position = 'absolute';
    rendererCss.domElement.style.top = 0;

    rendererGl = newTHREE.WebGLRenderer({alpha:true});
    rendererGl.setClearColor(0x00ff00, 0.0);

    rendererGl.setSize(window.innerWidth, window.innerHeight);

    rendererGl.domElement.style.position = 'absolute';
    rendererGl.domElement.style.zIndex = 1;
    rendererGl.domElement.style.top = 0;
    rendererCss.domElement.appendChild(rendererGl.domElement);

    document.body.appendChild(rendererCss.domElement);

}

functionanimate() {

    requestAnimationFrame(animate);

    controls.update();

    rendererGl.render(sceneGl, camera);
    rendererCss.render(sceneCss, camera);

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

Html5 Manual

Three.js Properly Blending Css3d And Webgl

Solution 1:

Post a Comment for "Three.js Properly Blending Css3d And Webgl"