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

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

  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);

Answer 2

你试过wireframe吗？

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

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

您是否查看过编辑器的代码以了解它是如何工作的？

编辑

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

编辑

HERE 是一个堆栈问题，展示了如何让 BoxHelper 在顶部呈现。
HERE 是一个小提琴作为实现上述内容的示例。