如何在three.js中合并两个几何或网格？

Question

我使用了 2 个几何图形，一个是基于线条的方形 2D 几何图形，第二个是图标图像。我希望应该居中并将图标放置在 2d 矩形绘制区域区域内。在我的代码下面。

var combined = new THREE.Geometry(); 
        var squareGeometry = new THREE.Geometry();
        squareGeometry.vertices.push(
                new THREE.Vector3(startX, startY, 0),
                new THREE.Vector3(endX, startY, 0),
                new THREE.Vector3(endX, endY, 0),
                new THREE.Vector3(startX, endY, 0),
                new THREE.Vector3(startX, startY, 0)
                );

        var square = new THREE.Line(squareGeometry, new THREE.LineBasicMaterial({
            color: color
        }));

        var iconGeometry = new THREE.PlaneGeometry(objSize.width, objSize.height);
        var iconMaterial = new THREE.MeshBasicMaterial({        map:THREE.ImageUtils.loadTexture('images/plantIcon.png')
         });
        var icon = new THREE.Mesh(iconGeometry,iconMaterial);
        icon.position.x = objPosition.x;
        icon.position.y = objPosition.z;

        combined.merge(square.geometry, square.matrix);
        combined.merge(icon.geometry, icon.matrix);
         var display = new THREE.Line(combined, new THREE.MeshBasicMaterial({
            color: color,
        }));

        scene.add(display);

Answer 1

试试这个。这个链接有合并几何link