GLTF & 分层 - 层上移动的对象被剪切/隐藏答案

【问题标题】：GLTF & layering- moved objects up a layer are clipped/hiddenGLTF & 分层 - 层上移动的对象被剪切/隐藏
【发布时间】：2021-04-13 21:39:25
【问题描述】：

我正在尝试将 glft 场景的子级向上移动一层，并应用渲染通道。将孩子提升到一个级别，我能够以不同的方式渲染它们，但是虽然它们的位置正确，但它们现在被从场景中剪裁/切断，它们仍然是其中的一部分。怎么会出现在原地？

glft scene as imported, all default layer

glft scene objects moves layers(1), hidden

工作小提琴： https://jsfiddle.net/3quhb1k8/30/

    const gLoader = new THREE.GLTFLoader();
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
gLoader.load('https://s3.amazonaws.com/headless.frol.us-uploads/demo.glb', (gltf) => {
  const objScene = gltf.scene;
  objScene.children.forEach((child) => {
    const lowerName = child.name.toLowerCase();
      if (lowerName.includes('romancolor')) {

        child.layers.set(1);
      }
  });
  gltf.scene.position.z += 120;
  gltf.scene.position.x = 110;
  window.gg = gltf.scene;
  scene.add(gltf.scene);
}, undefined, (error) => {
  throw new Error(error);
});

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(60, window.innerWidth/ window.innerHeight, 1, 10000);
camera.position.set(-10, 10, -5);
camera.layers.enable(1);


var controls = new THREE.OrbitControls(camera, renderer.domElement);
const light = new THREE.AmbientLight(0xffffff, 1);
light.layers.enableAll();
scene.add(light);

/// ///////////////////////////////////////////////////////////////////
// Effects
/// ///////////////////////////////////////////////////////////////////
const filmPass = new THREE.FilmPass(
  0.35, // noise intensity
  0.025, // scanline intensity
  648, // scanline count
  true, // grayscale
);
filmPass.renderToScreen = true;
const composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));
composer.addPass(filmPass);

render();
function render(){
  requestAnimationFrame(render);

  renderer.autoClear = false;
  renderer.clear();

  camera.layers.set(1);
  composer.render();
  renderer.render(scene, camera);

  renderer.clearDepth();
  camera.layers.set(0);
  renderer.render(scene, camera);
  
}```

【问题讨论】：

标签： three.js gltf

【解决方案1】：

问题在于渲染的顺序。您首先渲染树组，然后渲染地板。所以在第一次渲染后清除深度缓冲区没有效果。地板将覆盖树木并产生上述剪裁。

如果切换渲染顺序，效果会更好。但请注意，后处理已从演示中删除，因为您无法使用此方法选择性地对场景的某些部分进行后处理。

const gLoader = new THREE.GLTFLoader();
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();

gLoader.load('https://s3.amazonaws.com/headless.frol.us-uploads/demo.glb', (gltf) => {
  const objScene = gltf.scene;
  objScene.children.forEach((child) => {
    const lowerName = child.name.toLowerCase();
      if (lowerName.includes('romancolor')) {
        child.layers.set(1);
      }
  });
  gltf.scene.position.z += 120;
  gltf.scene.position.x = 110;
  scene.add(gltf.scene);
}, undefined, (error) => {
  throw new Error(error);
});

renderer.autoClear = false;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(60, window.innerWidth/ window.innerHeight, 1, 10000);
camera.position.set(-10, 10, -5);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
const light = new THREE.AmbientLight(0xffffff, 1);
light.layers.enableAll();
scene.add(light);


render();
function render(){
  requestAnimationFrame(render);

  renderer.clear();

  camera.layers.set(0);
  renderer.render(scene, camera);

  camera.layers.set(1);
  renderer.render(scene, camera);
  
}

body{
  overflow: hidden;
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.124/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.124/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.124/examples/js/loaders/GLTFLoader.js"></script>

【讨论】：