将第二个场景渲染到纹理不起作用

Question

我正在尝试学习 three.js 中的新知识。我的目标是能够将第二台摄像机在单独场景中看到的内容用作主场景的纹理。或者能够使用第二台摄像机在主场景中看到的内容作为纹理。但我只看到黑屏。我在这里发布了我的代码。我希望有人能认识到我的错误在哪里，因为我就是想不通。

分 3 个步骤：
纹理 = 第二个相机视图
material 使用纹理
将 material 普通应用于网格

见下文

var camera, controls, scene, renderer, container, aspect;

    
function main() {
init();
animate();
}


function init() {

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio ); 
    renderer.shadowMap.enabled = true; 
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             
    container = document.getElementById('container');
    renderer.setSize(container.clientWidth, container.clientHeight);
    container.appendChild( renderer.domElement );

    aspect = container.clientWidth / container.clientHeight; 
    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x000000 );
    
    camera = new THREE.PerspectiveCamera( 60, container.clientWidth / container.clientHeight, 1, 1000000 );
    
    camera.position.set(0, 0, 200);

    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.enableZoom = true;
    controls.enabled = true;
    controls.target.set(0, 0, 0);
    
    //-----End three basic setups-----


    var tex = generateTexture(renderer);
    

    var plane = new THREE.Mesh(
        new THREE.PlaneBufferGeometry(100.0, 100.0),
        new THREE.MeshBasicMaterial({
           color: 0x00caff,
           map: tex,
           side: THREE.DoubleSide,
        })
    );
    scene.add(plane);


}//-------End init----------


function animate() {

    requestAnimationFrame( animate );  
    render();
    
}//-------End animate----------

function render() {
    
    camera.updateMatrixWorld();
    camera.updateProjectionMatrix(); 
    renderer.render(scene, camera); 

}//-------End render----------


function generateTexture(renderer) {

    var resolution = 2000;
    var textureScene = new THREE.Scene();
    textureScene.background = new THREE.Color(0x404040);

    var renderTarget = new THREE.WebGLRenderTarget(resolution, resolution, {minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat});
        
    var textureCamera = new THREE.PerspectiveCamera(60, aspect, 0.1, 100000.0);
        
    textureCamera.position.set(0, 0, 200);
    textureCamera.lookAt(0, 0, 0);
    
    var geometry = new THREE.SphereGeometry( 60, 32, 16 ); 
    var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } ); 
    var sphere = new THREE.Mesh( geometry, material); 
    textureScene.add( sphere );

    //---changes---
    renderer.setRenderTarget( renderTarget );
    renderer.clear(); 
    renderer.render( textureScene, textureCamera );
    renderer.setRenderTarget(null);
        
    return renderTarget.texture;
    //-------------

    //---now it works fine---:)

}//----- End generateTexture ------

Answer 1

您是从教程中复制这种方法吗？您使用的 three.js 是什么版本？我问是因为您使用的是 renderer.render(scene, camera, target, true); 但 the docs state that .render() only accepts two arguments，因此传递 renderTarget 不会执行任何操作。

推荐you copy the approach in this demo，点击< >图标即可查看源码。精华部分如下：

// Render first scene into texture
renderer.setRenderTarget( renderTarget );
renderer.clear();
renderer.render( textureScene, textureCamera );

// Render full scene to canvas
renderer.setRenderTarget( null );
renderer.clear();
renderer.render( scene, camera );

将第二个场景渲染到纹理不起作用

Render second scene to texture not working

three.js