javascript - 如何制作与其他物体表面相交的可见边缘？(THREE.js)

Question

我在一个 three.js 项目中工作。在项目中，我必须显示几何体的所有边，即使这些边与其他对象的表面相交。

这是说明我的问题的代码片段。

var camera, scene, renderer, material, stats, group, wireframeMaterial;
init();
animate();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer({antialias: true, alpha:true,clearAlpha:0,clearColor: 0xff0000});
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // Create camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 400;

    // Create scene.
    scene = new THREE.Scene();
		group=new THREE.Group()

    // Create material
    material = new THREE.MeshBasicMaterial();

		wireframeMaterial=new THREE.LineBasicMaterial( { color: 0x000000, side:THREE.FrontSide ,transparent:false,opacity:1,linewidth: 1 })

    // Create cube and add to scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    var mesh1 = new THREE.Mesh(geometry, material);
    group.add(mesh1);
    
        
    var geometry2 = new THREE.BoxGeometry(100,100,100);
    var mesh2 = new THREE.Mesh(geometry2, material);
    group.add(mesh2);
    mesh2.position.fromArray([0,150,0])

    
    
    var edges = new THREE.EdgesGeometry( geometry );
    var line = new THREE.LineSegments( edges, wireframeMaterial );
    mesh1.add( line );


    var edges2 = new THREE.EdgesGeometry( geometry2 );
    var line2 = new THREE.LineSegments( edges2, wireframeMaterial );
    mesh2.add( line2 );


   		scene.add(group)

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);
}

function animate() {
    requestAnimationFrame(animate);
    group.rotation.x += 0.005;
    group.rotation.y += 0.01; 
    renderer.render(scene, camera);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

body {
    padding: 0;
    margin: 0;
}
canvas {
  display: block;
}

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

在 fiddle 代码中，您可以看到有两个立方体彼此重叠。我想让小立方体的底边变得可见。一种解决方案是使网格基本 Material 透明。然而，在那种情况下，位于立方体后面的边本身也会可见，这在项目中是不允许的。

那么这个问题有没有其他的解决方案呢？

Answer 1

找到一个很好的解决方案，需要使用基础 Material 的polygonOffset参数。

var material = new THREE.MeshBasicMaterial({
  polygonOffset: true,
  polygonOffsetFactor: 1, // positive value pushes polygon further away
  polygonOffsetUnits: 1
});

在这个问题上找到它:three.js EdgesHelper showing certain diagonal lines on Collada model

EdgesGeometry 将只渲染硬边。

WireframeGeometry 将渲染所有边。

var camera, scene, renderer, material, stats, group, wireframeMaterial;
init();
animate();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer({antialias: true, alpha:true,clearAlpha:0,clearColor: 0xff0000});
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // Create camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 400;

    // Create scene.
    scene = new THREE.Scene();
    group=new THREE.Group()

    // Create materials
    var material = new THREE.MeshBasicMaterial({
      polygonOffset: true,
      polygonOffsetFactor: 1, // positive value pushes polygon further away
      polygonOffsetUnits: 1
    });
    var wireframeMaterial= new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 2 } );

    // Create cube and add to scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    var edges = new THREE.EdgesGeometry(geometry);
    var line = new THREE.LineSegments( edges, wireframeMaterial );
    var mesh = new THREE.Mesh(geometry, material);
    group.add(mesh, line);
    
     
    var geometry2 = new THREE.BoxGeometry(100,100,100);
    var wire = new THREE.EdgesGeometry(geometry2);
    var line2 = new THREE.LineSegments( wire, wireframeMaterial );
    var mesh2 = new THREE.Mesh(geometry2, material);
    line2.position.fromArray([0,150,0]);
    mesh2.position.fromArray([0,150,0]);
    group.add(mesh2, line2);
    
		scene.add(group)

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);

    // Add stats to page.
    stats = new Stats();
    document.body.appendChild( stats.dom );
}

function animate() {
    requestAnimationFrame(animate);
    group.rotation.x += 0.005;
    group.rotation.y += 0.01; 
    renderer.render(scene, camera);
    stats.update();
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

<script type="text/javascript" src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>