Three.js EdgesHelper 在 Collada 模型上显示某些对角线 [英] three.js EdgesHelper showing certain diagonal lines on Collada model

问题描述

我在导出的简单模型上使用

这是我想要实现的外观:

解决方案

您在没有灯光的场景中同时渲染模型和边辅助对象.移除模型，您可以清楚地看到助手.所有边缘都正确渲染.

额外边的原因是因为您的模型中有两条边并发——一条短边和一条长边.您需要更改几何形状.这不是three.js的问题

如果您想显示边缘，但真正隐藏隐藏的边缘，则需要使用 webgl 功能 polygonOffset.您可以使用类似于以下内容的模式:

var mesh = dae.children[0].children[0];mesh.scale.set( 20, 20, 20 );//替换材质网格.材料 = 新三.MeshBasicMaterial( {颜色:0x000000，多边形偏移:真，polygonOffsetFactor: 1,//正值将多边形推得更远多边形偏移单位:1});场景.添加(网格)var helper = new THREE.EdgesHelper(mesh, 0xffffff);helper.material.linewidth = 2;场景添加(助手)；

更新小提琴:http://jsfiddle.net/6vLm5xsa/15/

three.js r.71

I'm using EdgesHelper on a simple model that I exported from SketchUp. It is showing some diagonal lines like this:

How do I prevent those lines from appearing, so that the edges looks like what it appears in SketchUp? I tried setting the thresholdAngle but it doesn't help.

Update:

Working demo: http://jsfiddle.net/alan0xd7/6vLm5xsa/

This is the look I am trying to achieve:

解决方案

You are rendering both the model and the edges helper in a scene without lights. Remove the model and you can see the helper clearly. All edges are rendered properly.

The reason for the extra edges is because you have two edges concurrent in your model -- a short edge and a long edge. You need to change your geometry. This is not a problem with three.js

If you want to show the edges, but have hidden edges truly hidden, you need to make use of the webgl feature polygonOffset. You can use a pattern similar to the following:

var mesh = dae.children[0].children[0];
mesh.scale.set( 20, 20, 20 );

// replace the material
mesh.material = new THREE.MeshBasicMaterial( {
    color: 0x000000,
    polygonOffset: true,
    polygonOffsetFactor: 1, // positive value pushes polygon further away
    polygonOffsetUnits: 1
} );
scene.add( mesh )

var helper = new THREE.EdgesHelper( mesh, 0xffffff );
helper.material.linewidth = 2;
scene.add( helper );

updated fiddle: http://jsfiddle.net/6vLm5xsa/15/

three.js r.71

这篇关于Three.js EdgesHelper 在 Collada 模型上显示某些对角线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！