我想在BufferGeometry中制作一个特定的轮廓。目标是制作一个填充多边形和周围的线。
现在,我尝试使用MultiMaterialObject,但该线穿过正方形:http://jsfiddle.net/VsWb9/3918/
var positionArray = [0,0,0, 0,100,0, 100,100,0,
0,0,0, 100,100,0 ,100,0,0],
colorArray = [];
for(var i = positionArray.length;i--;)
colorArray[i]=1 // white
bufferGeo.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positionArray), 3));
bufferGeo.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colorArray), 3));
materialsArray = [
new THREE.LineBasicMaterial({vertexColors: THREE.VertexColors, side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true, opacity: 0.2, transparent: true, shadding: THREE.SmoothShading})
];
mesh = THREE.SceneUtils.createMultiMaterialObject(bufferGeo, materialsArray);
但是我不需要交叉线。在此示例中,我使用正方形,但是在我的项目中有数千个多边形(五角形,六边形等)。
没有交叉线,做完美轮廓的最佳方法是什么?
制作两个单独的“ BufferGeometry”? (一种使用具有不同顶点位置序列的LineBasicMaterial,另一种使用具有实际序列的MeshBasicMaterial)
其他?
谢谢
最佳答案
如果要突出显示几何的边缘,可以使用EdgesHelper
:
var helper = new THREE.EdgesHelper( mesh, 0x00ffff );
helper.material.linewidth = 2; // optional
scene.add( helper )
如果您的网格物体包含其他材质,则可能会通过
EdgesHelper
产生Z轴战斗伪像。解决方法涉及polygonOffset
。请参见three.js EdgesHelper showing certain diagonal lines on Collada model。另请注意,在以下更新的小提琴中使用了它。但是,您的几何图形存在问题。正面缠绕顺序必须为逆时针方向。那是一个单独的问题。
更新的小提琴:http://jsfiddle.net/VsWb9/3923/
three.js r.71