Question

我开始使用这个example，其中同时使用CSS2D渲染器和WebGL渲染器-效果很好。现在，我想加载目标文件并为其添加CSS标签。我从OBJ-Loader Example开始。在那里，渲染器的创建过程如下（以下所有代码段均引用加载程序示例）：

        initGL: function () {
            this.renderer = new THREE.WebGLRenderer( {
                canvas: this.canvas,
                antialias: true,
                autoClear: true
            } );  .....

渲染器的调用方式如下：

        render: function () {
            if ( ! this.renderer.autoClear ) this.renderer.clear();
            this.controls.update();
            this.renderer.render( this.scene, this.camera );
        }

我的问题是我不知道如何集成CSS2 Renderer。我只是尝试将新的labelrenderer添加到WebGLRenderer的相同位置，但是似乎不起作用：

        initGL: function () {
            this.renderer = new THREE.WebGLRenderer( {
                canvas: this.canvas,
                antialias: true,
                autoClear: true
            } );  //same code as before
           this.labelRenderer = new THREE.CSS2DRenderer(); 
           document.getElementById( 'example' ).appendChild(this.labelRenderer.domElement );....

我也尝试在WebGL Renderer的相同位置处更新渲染：

render: function () {
                if ( ! this.renderer.autoClear ) this.renderer.clear();
                this.controls.update();
                this.renderer.render( this.scene, this.camera );
                //same code as before
                this.labelRenderer.render(this.scene,this.camera);
            }

结果：WebGL渲染器似乎可以正常工作（已加载模型），但Webgl渲染器却无法正常工作...我没有收到任何错误消息，但根本看不到任何标签。我怎么了我创建标签如下：

var earthDiv = document.createElement( 'div' );
earthDiv.className = 'label';
earthDiv.textContent = 'MYLABEL IS NOT SHOWN';
earthDiv.style.marginTop = '-1em';
var earthLabel = new THREE.CSS2DObject( earthDiv );
earthLabel.position.set( 0, 3, 0 );
scope.scene.add(earthLabel );

Answer 1

我找到了解决方案。问题在于CCS2对象已添加到错误的div中：

document.getElementById( 'example' ).appendChild(this.labelRenderer.domElement );

当然，来自WebGL Renderer的画布和标签Renderer的dom必须都添加到同一父对象（元素example是webgl渲染器的dom）

非常感谢您的支持！

具有WebGLRenderer的CSS2DRenderer无法正常工作

1 个答案: