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

时间:2018-03-29 07:19:03

标签: javascript three.js

我使用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);

1 个答案:

答案 0 :(得分:0)

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