three.js - Object with a higher renderOrder being clipped by rotated element -


a rotated object (cylinder in case) cuts off objects (a triangle made lines in case) though renderorder of second object higher. see this jsfiddle demo effect.

the triangle should rendered on top of cylinder cut off outside of cylinder intersects it. it's easier understand what's happening when texture used, jsfiddle bad @ using external images.

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 triangle     = c / 2,     b = math.sqrt(c * c - * a),     yoffset = -b / 3; // vertical offset (if 0, triangle on x axis)    // draw 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 on top of cylinder   plane.renderorder = 2; // should override clipping, right?   scene.add(plane); }   function animate() {   requestanimationframe(animate);    render(); }  function render() {   renderer.render(scene, camera); } 

am doing wrong or bug?

for effect want use second scene , render onto first one

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 not mean think means, @ implementation in webglrenderer objects sorted order, if meant anticipated it, there fixed rendering order , colliding objects seen through each other, renderorder afaik used when have issues order of transparent/ not opaque objects


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

python 3.x - PyQt5 - Signal : pyqtSignal no method connect -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)