三个如何突出环面与平面的相交区域

Question

我想在 Threejs 中突出显示旅行和飞机等两个对象的交叉区域。例如，我创建了像

这样的旅游

    const geometry = new THREE.TorusGeometry(1, 0.4, 16, 100);
    const material = new THREE.MeshStandardMaterial({     color: 0x0077ff,
      side: THREE.DoubleSide,
      transparent: true,
      opacity: 0.5
    });
    this.torus = new THREE.Mesh(geometry, material);

还有这样的飞机

    const geometry = new THREE.PlaneGeometry(5, 5, 32, 32);
    const material = new THREE.MeshStandardMaterial({ color: 0xff0000, side: THREE.DoubleSide,opacity: 0.5, transparent: true ,depthWrite: false});
    this.plane = new THREE.Mesh(geometry, material);
    this.plane.position.set(0, 0, 1);
    this.plane.rotation.x = Math.PI / 2;
    this.scene.add(this.plane);
    this.objects.push(this.plane);
    

渲染后看起来像这样

但我想强调如下交叉点

我怎样才能实现这个输出？

Answer 1

检查一下。

const radius = 0.5;
const segments = 32;
const vertices = [];
for (let i = 0; i <= segments; i++) {
    const theta = (i / segments) * Math.PI * 2;
    const x = radius * Math.cos(theta);
    const y = radius * Math.sin(theta);
    vertices.push(new THREE.Vector3(x, y, 0));
}
const circleGeometry = new THREE.BufferGeometry().setFromPoints(vertices);
const material = new THREE.LineBasicMaterial({ color: 0xffffff });
const circle = new THREE.LineLoop(circleGeometry, material);
circle.rotation.x = 1.5;
circle.position.x = -2;

const clonedCircle = new THREE.LineLoop(circleGeometry.clone(), material.clone());
clonedCircle.rotation.x = circle.rotation.x;
clonedCircle.position.x = 2;

const geometryT = new THREE.TorusGeometry(2, 0.5, 20, 50, Math.PI);
const materialT = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const materialClone = new THREE.MeshBasicMaterial({ color: 0xff00ff });
const torus = new THREE.Mesh(geometryT, materialT);

const clonedGeometry = geometryT.clone();
const clonedMaterial = materialClone;
const clonedTorus = new THREE.Mesh(clonedGeometry, clonedMaterial);
clonedTorus.rotation.x = Math.PI;

const planeGeometry = new THREE.PlaneGeometry(5, 5);
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff, side: THREE.DoubleSide});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = 1.5;

const group = new THREE.Group();
group.add(circle);
group.add(clonedCircle);
group.add(torus);
group.add(clonedTorus);
group.add(plane);

scene.add(group);

但请参阅您之前关于双色环面的帖子。我忘记了

arc

...现在可以轻松分割了。