显示线框和纯色 [英] Display wireframe and solid color
本文介绍了显示线框和纯色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以在同一对象上显示对象的线框及其表面的纯色?我找到了一种使用对象克隆并分配不同材质的方法,例如
Is it possible to display the wireframe of the object and also the solid color of its faces on the same object? I found a way using a clone of the object and assign different materials e.g
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;
有什么想法吗?
推荐答案
要同时渲染模型及其线框,可以使用如下所示的模式:
To render both a model and its wireframe, you can use a pattern like this one:
// 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角碰撞.因此,线框看起来会好很多.
The use of polygonOffset
will help prevent z-fighting between the mesh material and the wireframe line. Consequently, the wireframe will look a lot better.
小提琴: http://jsfiddle.net/tfjvggfu/24/
已更新为three.js r.82
updated to three.js r.82
这篇关于显示线框和纯色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文