Question

您好我一直在玩渲染目标，但我遇到了一些问题。我在这里创建了一个简化的例子：

＆＃13;

init = function() {

  // RENDERER

  canvas = document.getElementById("mycanvas");
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  document.body.appendChild( renderer.domElement );
  renderer.setClearColor(0x000000, 1.0);
  renderer.setSize(window.innerWidth, window.innerHeight);

  // SCENE

  texscene = new THREE.Scene();

  texcamera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  texcamera.position.z = 2;

  // FRAMEBUFFER

  var renderTargetParams = {
    minFilter:THREE.LinearFilter,
    stencilBuffer:false,
    depthBuffer:false,
    wrapS: THREE.RepeatWrapping,
    wrapT: THREE.RepeatWrapping	      
  };
  rendertarget = new THREE.WebGLRenderTarget( 512, 512, renderTargetParams );

  // CUBE

  var cubeGeo = new THREE.BoxGeometry( 1, 1, 1, 1, 1, 1 );
  var cubeMat = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
  texcube = new THREE.Mesh( cubeGeo, cubeMat )
  texscene.add(texcube);

  var blueMaterial = new THREE.MeshBasicMaterial({color:0x7074FF})
  var plane = new THREE.PlaneBufferGeometry( 100, 100 );
  var planeObject = new THREE.Mesh(plane,blueMaterial);
  planeObject.position.z = -15;
  texscene.add(planeObject);

  /////////////////////////////////

  //SCENE

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );

  var boxMaterial = new THREE.MeshBasicMaterial({map:rendertarget.texture});
  var boxGeometry2 = new THREE.BoxGeometry( 5, 5, 5 );
  mainBoxObject = new THREE.Mesh(boxGeometry2,boxMaterial);

  // Move it back so we can see it
  mainBoxObject.position.z = -10;
  // Add it to the main scene
  scene.add(mainBoxObject);

  animate();			
}

animate = function() {
  requestAnimationFrame(animate);

  renderer.render(texscene, texcamera, rendertarget);

  renderer.render(scene, camera);

  texcube.rotation.y += 0.01;
  texcube.rotation.z += 0.01;

  mainBoxObject.rotation.x +=0.01;
  mainBoxObject.rotation.y += 0.005;
  mainBoxObject.rotation.z += 0.008;
}

init();

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>

＆＃13;

我将红色立方体和蓝色平面渲染到渲染目标，然后将其用作纹理。问题是红色立方体在最终结果中不可见。

尝试通过更改

来查看渲染目标场景

renderer.render(texscene, texcamera, rendertarget);
renderer.render(scene, camera);

要 renderer.render（texscene，texcamera）;

Answer 1

显然问题是由关闭深度缓冲区引起的，就像我在rendertarget的设置中所做的那样

    depthBuffer:false,

删除此行会使我的渲染目标呈现为蓝色背景上的红色框

渲染渲染目标使我的一些图形不可见

1 个答案: