javascript - ThreeJS CSG 相交挤压形状的问题

Question

我有很多 View ，我试图挤出然后相交以创建最终多边形。问题是结果不是预期的，它有一些 float 的额外部分。我需要以某种方式纠正这个问题，即使解决方案是一种检测这些 float 额外部分并删除它们的方法。
我正在使用这个库 https://www.npmjs.com/package/three-csg-ts/v/3.1.10进行交集的二元运算。
我不知道这是一个错误还是我做错了什么。我已经为挤出设置尝试了很多不同的配置，但我仍然遇到同样的问题。
我对 js 或 ThreeJS 没有太多经验，所以如果我的代码不那么可读，我很抱歉，我已经尽力了。

import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { CSG } from 'three-csg-ts'

// Canvas
const canvas = document.querySelector('canvas.webgl')

/**
 * Sizes
 */
 const sizes = {
    width: 1677,
    height: 1287
}

// Scene
const scene = new THREE.Scene()

// View Points
const view_1 = [1019, 516, 1005, 502, 968, 481, 944, 482, 911, 492, 902, 505, 892, 510, 879, 522, 880, 595, 889, 612, 899, 619, 941, 621, 998, 620, 1011, 615, 1018, 599, 1017, 594, 1022, 575, 1023, 541]
const view_2 = [874.9, 221, 878.4, 274.3, 888.2, 296.3, 893.9, 306.1, 902.5, 320.9, 916.5, 327.1, 937.6, 337.1, 960, 329.6, 973.8, 323.1, 983.5, 314.6, 994.3, 307.3, 1008.4, 297.5, 1018, 271, 1019, 253, 1019.1, 239.5, 1006.5, 230, 996.6, 225.2, 987.8, 218.9, 958.8, 204.1, 939.5, 198.9, 892.7, 203.7]
const view_3 = [1002, 867, 985.9, 885.3, 984.7, 918.4, 986.7, 931, 994.9, 941.1, 1001.2, 957.6, 1015, 970.1, 1028.9, 980.9, 1046, 982.2, 1061.3, 980.9, 1077.6, 968.8, 1100.4, 945.5, 1103.4, 900.7, 1093.1, 879.7, 1077.1, 864, 1064.4, 855.6, 1053, 856.9, 1046, 853.7, 1025.7, 856.9, 1012, 859.4]
const view_4 = [619, 648, 592, 681, 597, 702, 607, 719.3, 624.5, 725.9, 646.2, 731.7, 658.2, 735.7, 669.3, 739.3, 680, 742.3, 690.3, 737.5, 697.1, 726.6, 690.1, 711.5, 686, 706, 683, 694, 683, 682, 674, 663, 668, 660, 659, 649, 650, 647, 644, 642, 629, 643]
const view_5 = [1282, 499, 1261, 504, 1256, 509, 1255.7, 508.2, 1251.4, 509.9, 1240, 515.5, 1227.7, 527.7, 1212.2, 587.7, 1210.9, 609, 1213.9, 615.8, 1216, 617.8, 1219.7, 623.3, 1226, 628.6, 1259.3, 625.1, 1267, 615, 1280, 561]
const views = [view_1,view_2,view_3, view_4, view_5]

//Split array in pairs
function chunk(arr, size) {
    return Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
      arr.slice(i * size, i * size + size))
}

//Shape constructor and extruder
const extrudeSettings = {
    steps: 8,
    depth: 600,
    bevelEnabled: false,
    bevelThickness: 1,
    bevelSize: 0,
    bevelOffset: 0,
    bevelSegments: 1
};
var degree = 0
var pos = 0
var meshes = []

for(let view in views){
    var point_list = []
    var pair_array = chunk(views[view],2) //separate in pairs
    for (let pair in pair_array){
        point_list.push(new THREE.Vector2(-pair_array[pair][0]+sizes.width/2,-pair_array[pair][1]+sizes.height/2)) //creating vectors
    }
    console.log(point_list)
    var shape = new THREE.Shape(point_list); //constructing the Shape
    extrudeSettings.depth = 600
    var shapeGeom = new THREE.ExtrudeGeometry( shape, extrudeSettings ); //Extruding the shape

    //position transformations
    shapeGeom.rotateX(Math.PI * 0.5); 
    shapeGeom.rotateZ(THREE.MathUtils.degToRad(degree));
    degree += 45
    const shapeMat = new THREE.MeshPhongMaterial({color: "aqua"});
    shapeMat.side = THREE.DoubleSide
    var shapeMesh = new THREE.Mesh(shapeGeom, shapeMat); 
    
    //more position transformations
    shapeMesh.geometry.computeBoundingBox();
    var boundingBox = new THREE.Box3();
    boundingBox.copy( shapeMesh.geometry.boundingBox );
    shapeMesh.updateMatrixWorld( true ); // ensure world matrix is up to date
    boundingBox.applyMatrix4( shapeMesh.matrixWorld );
    shapeMesh.position.x = shapeMesh.position.x - (boundingBox.min.x + boundingBox.max.x)/2
    shapeMesh.position.y = shapeMesh.position.y - (boundingBox.min.y + boundingBox.max.y)/2
    shapeMesh.position.z = shapeMesh.position.z - (boundingBox.min.z + boundingBox.max.z)/2

    //adding to the scene
    shapeMesh.updateMatrix()
    meshes.push(shapeMesh)
    scene.add(shapeMesh); //comment if doesn't want to show the extruded shapes, but only the final result
}

//Intersection
var intersection = meshes[0]
for (let mesh in meshes){
    meshes[mesh].updateMatrix()
    intersection = CSG.intersect(intersection,meshes[mesh])
}
intersection.material = new THREE.MeshNormalMaterial()
scene.add(intersection)

// Lights
scene.add( new THREE.HemisphereLight(0xffffbb,0x080820,2) );

/**
 * Camera
 */
// Base camera
const camera = new THREE.OrthographicCamera( sizes.width / - 2, sizes.width / 2, sizes.height / 2, sizes.height / - 2, 0.1, 3000 );
camera.position.set( 0, 800, 0 );
camera.up = new THREE.Vector3( 0, 0, 1 );
scene.add(camera)

var camera_pivot = new THREE.Object3D()
scene.add( camera_pivot );
camera.lookAt( camera_pivot.position );

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas, 
    preserveDrawingBuffer: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */

const clock = new THREE.Clock()
const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()  
    // Update Orbital Controls
    controls.update()
    // Render
    renderer.render(scene, camera)
    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

以下是一些说明问题的屏幕截图:


我真的认为问题可能出在我正在使用的挤压方法上，但我不明白应该如何才能正常工作。或者也许这就是我试图做交叉的方式，与之前的结果一个接一个地交叉。我试图按时间做两个对象，然后与两个相交结果相交，但没有任何进展。

Answer 1

好吧，在玩了一会儿你的代码之后，我认为我的结果是正确的。
如您所料，问题出在交集部分:

//Intersection
var intersection = meshes[0]
for (let mesh in meshes){
    meshes[mesh].updateMatrix()
    intersection = CSG.intersect(intersection,meshes[mesh])
}
intersection.material = new THREE.MeshNormalMaterial()
scene.add(intersection)

这里有问题。如果我理解正确， by the associative property of logical intersection of sets ，如果你逐个网格做交叉网格并不重要(如果我错了，有人纠正我)，所以问题不在于那个。
老实说，我不确定问题出在哪里，也许是您将第一个相交点设置为 mesh[0]，然后循环整个网格阵列，使其至少与一个形状相交。当我添加 if(meshes[mesh].geometry.uuid === meshes[0].geometry.uuid) continue;进入循环，这似乎已经很好地工作了，但我不建议将其作为解决方案。
我提出的解决方案是将代码的整个交叉部分替换为:

//Intersection
meshes.forEach((mesh) => mesh.updateMatrix());
var intersection = CSG.intersect(...meshes);
intersection.material = new THREE.MeshNormalMaterial()
scene.add(intersection)

首先，我用更实用的 forEach 替换了循环。 -clause 更新矩阵。
二、我用了 spread syntax调用 CSG.intersect一次使用网格阵列中的所有网格。
这会产生如下形状:

我不是 100% 确定这是否是与这么多多边形相交的正确结果，但它看起来相对干净并且没有像您的示例中那样的任何额外 float 部分。
P.S 感谢有趣的路口代码!我只涉足 Three.js 并阅读了有关 CSG 的内容，所以玩这两者真的很有趣。 Here is my codesandbox .