三.JS 线框材料 - 所有多边形与仅边缘

问题描述

我在一个项目中使用 ThreeJS，并注意到旧版本渲染线框与新版本不同，我不知道如何恢复(我更喜欢).

此小提琴使用版本 54 仅渲染使用线框材料绘制的对象的外边缘:，了解如何同时呈现模型及其线框.

更新为three.js.r.82

I'm using ThreeJS in a project and noticed that older versions render wireframes differently than newer versions, and I can't figure out how to revert (which I'd prefer).

This fiddle using release 54 renders only the exterior edges of the object drawn with a wireframe material: http://jsfiddle.net/ksRyQ/or as pictured here in case this is platform specific (I'm on mac chrome):

On the other hand, when I run the same code locally using the newer version r61 I see each polygon's edge, as in:

the code in both cases is simple:

material = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    wireframe: true
});

I'm sure I could make the cube out of lines or something, but I'd rather actually understand the issue.

Any clues? Is there a setting for this or something that can be tweaked? Secondarily, you'll note that right now that code is using the canvas renderer, although I plan to use the webGL renderer, but the same phenomenon is true with both (even though there are other differences).

解决方案

If you want to render a wireframe of a given geometry, you can now use this pattern:

var geo = new THREE.EdgesGeometry( geometry ); // or WireframeGeometry( geometry )

var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );

var wireframe = new THREE.LineSegments( geo, mat );

scene.add( wireframe );

WireframeGeometry will render all edges. EdgesGeometry will render the hard edges only.

Also see this related answer on how to render both a model and its wireframe.

EDIT: updated to three.js.r.82

这篇关于三.JS 线框材料 - 所有多边形与仅边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！