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

Question

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

分三步：
纹理=第二个相机视图
材质使用质感
将普通材质应用于网格

见下文

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 );
    
    renderer.render(textureScene, textureCamera, renderTarget, true);
        
    var texture = renderTarget.texture;
        
    renderer.setRenderTarget(null);
        
    return texture;

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

Answer 1

您是从教程中复制此方法吗？您使用的是什么版本的 Three.js？我这样问是因为您正在使用

renderer.render(scene, camera, target, true);

但 文档指出

.render()

只接受两个参数，因此传递 renderTarget 不会执行任何操作。

我建议你复制这个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 );