如何在三个js中为子网格添加轮廓

How to add outline on child mesh in three js

本文关键字:网格 轮廓 添加 js 三个      更新时间:2023-09-26

我想给网格添加轮廓。我按照示例创建了一个使用相同几何形状的新网格,并缩放了网格。

    var outlineMaterial = new THREE.MeshBasicMaterial({color: 0x00ffff, side: THREE.BackSide});
    this.outlineMesh = new THREE.Mesh(target.geometry, outlineMaterial);
    this.outlineMesh.quaternion = target.quaternion;
    this.outlineMesh.position = target.position;
    this.outlineMesh.scale.copy(target.scale);
    this.outlineMesh.scale.multiplyScalar(1.05);
    this.scene.add(this.outlineMesh);

它工作得很好,outlineMesh的位置总是与目标网格相同。然而,当我将目标网格作为子网格添加到其他网格时,outlineMesh的位置与目标网格不同。我认为这是因为目标位置与父坐标相关,但是outlineMesh仍然在世界坐标中。

任何想法如何使轮廓工作的子网格?非常感谢!

只需将outlineMesh添加为目标mesh的子元素,如下所示:

var outlineMaterial = new THREE.MeshBasicMaterial( { color: 0x00ffff, side: THREE.BackSide } );
outlineMesh = new THREE.Mesh( geometry, outlineMaterial );
outlineMesh.scale.multiplyScalar( 1.05 );
mesh.add( outlineMesh );

three.js r.67