显示线框和纯色

Question

是否可以在同一对象上显示对象的线框以及其面的纯色？我找到了一种方法,使用对象的克隆并分配不同的材料,例如

var geometry = new THREE.PlaneGeometry(plane.width, plane.height,width - 1, height - 1);
var materialWireframe = new THREE.MeshPhongMaterial({color:"red",wireframe:true});
var materialSolid = new THREE.MeshPhongMaterial({color:"green",wireframe:false});
var plane = new THREE.Mesh(geometry, materialWireframe );
var plane1 = plane.clone();
plane1.material = materialSolid ;
plane1.material.needsUpdate = true;

有什么想法吗？

Answer 1

要渲染模型及其线框,您可以使用如下模式:

// mesh
var material = new THREE.MeshPhongMaterial( {
    color: 0xff0000,
    polygonOffset: true,
    polygonOffsetFactor: 1, // positive value pushes polygon further away
    polygonOffsetUnits: 1
} );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh )

// wireframe
var geo = new THREE.EdgesGeometry( mesh.geometry ); // or WireframeGeometry
var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
var wireframe = new THREE.LineSegments( geo, mat );
mesh.add( wireframe );

使用polygonOffset将有助于防止网格材料和线框线之间的z战斗.因此,线框看起来会好很多.

小提琴:http://jsfiddle.net/tfjvggfu/24/

编辑:更新为three.js r.82

Answer 2

这也可以通过 WireframeGeometry 来实现： https:// Threejs.org/docs/#api/en/geometries/WireframeGeometry。（并给平面和线相同的位置，您也可以使用不透明度，请参阅文档）。

let geometryWithFillAndWireFrame = () => {

    let geometry = new THREE.PlaneGeometry(250, 250, 10, 10);
    let material = new THREE.MeshBasicMaterial( { color: 0xd3d3d3} );
    let plane = new THREE.Mesh(geometry, material);

    scene.add(plane);

    let wireframe = new THREE.WireframeGeometry( geometry );

    let line = new THREE.LineSegments( wireframe );
        
    line.material.color.setHex(0x000000);
        
    scene.add(line);
        
};