Three.js勾勒出网格

Question

如何使大纲影响与THREE.js editor相同？

我试过这个：

// child = child of my object

var outlineMaterial1 = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.BackSide } );

var outlineMesh1 = new THREE.Mesh( child.geometry, outlineMaterial1 );
outlineMesh1.position = child.position;

outlineMesh1.scale.multiplyScalar(1.05);
scene.add( outlineMesh1 );

尝试执行与此example（code）相同的操作。我的效果完全不同：

同样的问题：#1和#2。

Answer 1

你试过wireframe吗？

var outlineMaterial1 = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.BackSide, wireframe: true } );  

不确定您是否需要THREE.BackSide 看看parameters for MeshBasicMaterial here

您是否看过编辑器的代码，看看它是如何做到的？

编辑

我认为编辑器正在使用BoxHelper对象来创建大纲

编辑

HERE是一个堆栈问题，显示如何将BoxHelper渲染到最顶层 HERE是一个小提琴，作为实现上述内容的一个例子。

Answer 2

如果您在用户点击网格时需要一些思考，可以使用以下代码：

  let geo = new THREE.EdgesGeometry(intersects[0].object.geometry);
            let mat = new THREE.LineBasicMaterial({ color: "black", linewidth: 10 });
            let wireframe = new THREE.LineSegments(geo, mat);
            wireframe.renderOrder = 1; // make sure wireframes are rendered 2nd
            intersects[0].object.add(wireframe);