Question

即使第二个对象的renderOrder较高，旋转的对象（在这种情况下为圆柱体）也会切断对象（在这种情况下由线条构成的三角形）。有关效果，请参阅this jsfiddle demo。

三角形应该完全呈现在圆柱体的顶部，但是在圆柱体的外部与圆柱体相交的地方被切除。使用纹理时更容易理解发生了什么，但jsfiddle在使用外部图像方面表现不佳。

var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true, 
    preserveDrawingBuffer: true 
  });
  renderer.setClearColor(0x24132E, 1);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 10000);
  camera.position.set(0, 0, 7);
  camera.lookAt(scene.position)
  scene.add(camera);

  var geometry = new THREE.CylinderGeometry(1, 1, 100, 32, 1, true);

  var material = new THREE.MeshBasicMaterial({
    color: 0x0000ff
  });

  material.side = THREE.DoubleSide; 
  mesh = new THREE.Mesh(geometry, material);
  mesh.rotation.x = Math.PI / 2;
  scene.add(mesh);



  var c = 3, // Side length of the triangle
    a = c / 2,
    b = Math.sqrt(c * c - a * a),
    yOffset = -b / 3; // The vertical offset (if 0, triangle is on x axis)

  // Draw the red triangle
  var geo = new THREE.Geometry();
  geo.vertices.push(
    new THREE.Vector3(0, b + yOffset, 0),
    new THREE.Vector3(-a, 0 + yOffset, 0),
    new THREE.Vector3(a, 0 + yOffset, 0),
    new THREE.Vector3(0, b + yOffset, 0)
  );

  var lineMaterial = new THREE.LineBasicMaterial({
    color: 0xff0000,
    linewidth: 5,
    linejoin: "miter"
  });

  plane = new THREE.Line(geo, lineMaterial);
  // Place it on top of the cylinder
  plane.renderOrder = 2; // This should override any clipping, right?
  scene.add(plane);
}


function animate() {
  requestAnimationFrame(animate);

  render();
}

function render() {
  renderer.render(scene, camera);
}

我做错了什么还是这个错误？

Answer 1

表示您想要使用第二个场景并将其渲染到第一个场景

的效果

function init(){
    .....
    renderer.autoClear = false;
    scene.add(tube);
    overlayScene.add(triangle);
    .....
}

function render() {
    renderer.clear();
    renderer.render(scene, camera);
    renderer.clearDepth();
    renderer.render(overlayScene, camera);
}

renderOrder并不代表您认为的含义，请查看WebGLRenderer中的实现对象按顺序排序，如果它意味着你对它的预期，总会有一些固定的渲染顺序和相互碰撞的对象，当有透明/不透明对象的顺序问题时，renderOrder是AFAIK使用的

Answer 2

我为three.js添加了一个小插件，用于我的游戏。 Three.js内置的flares插件很慢，我更喜欢不再运行另一个渲染通道，它将帧速率降低一半。这是我如何在实际位于它们前面的物体上看到耀斑。

材料参数：

{
  side: THREE.FrontSide,
  blending: THREE.AdditiveBlending,
  transparent: true,
  map: flareMap,
  depthWrite: false,
  polygonOffset: true,
  polygonOffsetFactor: -200
}

depthWrite - 设为false

polygonOffset - 设为真

polygonOffsetFactor - 给出负数以将对象放在别人面前。给它一些非常高的价值，真正掌握一切，即-10000

忽略其他参数，我的耀斑需要它们

具有较高renderOrder的对象被旋转元素剪切

2 个答案: