如何将两个不同的几何和不同的材料合并为三个中的一个.js?

时间:2018-03-29 10:25:37

标签: javascript canvas three.js

我将一个square 2D line diagram而不是方形图绘制到放在中心位置的另一个sample image。但是一个可见另一个隐藏。我用了两种不同的几何材料。 one is line base material set a colorsecond image material。我做了但不恰当。请,任何人,在我的代码中提出想法或错误?

 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 squareMaterial = new THREE.LineBasicMaterial({color: color});
var square = new THREE.Line(squareGeometry, squareMaterial);

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


//      square.holes.push( icon);
//      THREE.GeometryUtils.merge(square, icon);

combined.merge(square.geometry, square.matrix);
combined.merge(icon.geometry, icon.matrix);

var merge = new THREE.Mesh(combined,new THREE.MeshBasicMaterial({
map:THREE.ImageUtils.loadTexture('images/plantIcon.png'),//color: color
}));

merge.position.x = objPosition.x;
merge.position.y = objPosition.z;

scene.add(merge);

1 个答案:

答案 0 :(得分:0)

我使用了2 different Mesh。一个是THREE.Line()网格,第二个是THREE.Mesh。我确实合并了分组var group = new THREE.Object3D()方法。在我的代码下面。它正在发挥作用。

var group = new THREE.Object3D();
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 squareMaterial = new THREE.MeshBasicMaterial({color: color});
var square = new THREE.Line(squareGeometry, squareMaterial);

var iconGeometry = new THREE.PlaneGeometry((objSize.width/2), (objSize.depth/2));
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;

group.add(square);
group.add(icon);

scene.add(group);