Question

我正在尝试在我的three.js草图上叠加一些HTML文本，但是更改z-index不会改变任何内容。我知道我可以使用innerHTML，但是我也需要使用onclick属性，这将导致我进一步的问题，这不是这个问题的主题。

对于提供的示例，我使用的是CSS3D渲染器，我希望将HTML内容显示在侧面，但是更改填充值后，整个主体只会降低，而不是仅显示文本。

有谁知道这种修复是否可行？

编辑：

 // WebGL renderer2
 renderer2= new THREE.WebGLRenderer({ antialias: true });
renderer2.setClearColor(0xffffff, 1.0)
 renderer2.setSize(window.innerWidth, window.innerHeight);
//renderer2.domElement.style.position = 'relative';
 renderer2.domElement.style.zIndex = '-1';
 document.body.appendChild(renderer2.domElement);

在进行了一些进一步的调查之后，我决定添加另一个渲染器，以便CSS3D和WEBGL将在同一页面上同时加载，但是在将这两个位置更改为相对位置时，它们最终会堆叠在另一个之下，因此我有两个画布，理想情况下，它们必须一个堆叠在另一个上，然后将HTML文本放在一边。

    <!DOCTYPE html>
<html>
<head>

    <script src="http://threejs.org/build/three.min.js"></script>
    <script src="http://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
    <style>
        body {

            margin: 0;
            overflow: hidden;
            background-color: white;

        }

        .text{

            z-index: 99;
            padding-top: 5%;

        }

        .large {
            font-size: xx-large;
        }
    </style>


</head>
<body>
    <div class="text">
        <p>Lorem Ipsum</p>
    </div>

<script>

    var string = '<div>' +
            '<h1>A test CSS3D example.</h1>' +
            '<span class="large">this is an input example</span>' +
            '<textarea> Try adding text here</textarea>' +
            '</div>';

    // global variables
    var renderer;
    var scene;
    var camera;

    function init() {


        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        renderer = new THREE.CSS3DRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        renderer.domElement.style.position = 'absolute';
        renderer.domElement.style.zIndex= '1';

        camera.position.x = 500;
        camera.position.y = 500;
        camera.position.z = 500;
        camera.lookAt(scene.position);


        document.body.appendChild(renderer.domElement);
        var cssElement = createCSS3DObject(string);
        cssElement.position.set(100, 100, 100);
        scene.add(cssElement);

        render();
    }

    function createCSS3DObject(s) {

        var wrapper = document.createElement('div');
        wrapper.innerHTML = s;
        var div = wrapper.firstChild;


        div.style.width = '370px';
        div.style.height = '300px';
        div.style.transform = 'rotate(70deg)';
        div.style.opacity = 0.7;
        div.style.background = new THREE.Color(Math.random() * 0xffffff).getStyle();


        var object = new THREE.CSS3DObject(div);
        return object;
    }

    function render() {

        renderer.render(scene, camera);
         requestAnimationFrame(render);
    }

    window.onload = init;

</script>
</body>

</html>

Answer 1

您的班级text有一个z索引，但是，您需要将其定位absolute或relative以便应用z-index。 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

如果您提供jsfiddle或codepen，我很乐意为您提供更具体的答案。

在three.js渲染器上叠加HTML文本

1 个答案: