I have created two objects doubleSquare and doubleSquare1. I was expecting the output to be Double Line Square Object, but I have tried two different formats and have not achieved the desired output. Can someone please provide me with a solution? I have looked at many examples while analyzing websites. What mistake have I made in the code?
Type 1 (In the code below, the doubleSquare closepath starts with another object draw. How can I split it?)
function doubleSquareDemoDraw(startX, startY, endX, endY, color){
var widthLength = Math.round(Math.abs(endX - startX));
var heightLength = Math.round(Math.abs(endY - startY));
console.log(widthLength+'::'+heightLength);
var combined = new THREE.Geometry();
var doubleSquare = new THREE.Geometry();
doubleSquare.vertices.push(new THREE.Vector3(startX, startY, 0));
doubleSquare.vertices.push(new THREE.Vector3(endX, startY, 0));
doubleSquare.vertices.push(new THREE.Vector3(endX, endY, 0));
doubleSquare.vertices.push(new THREE.Vector3(startX, endY, 0));
doubleSquare.vertices.push(new THREE.Vector3(startX, startY, 0));
doubleSquare.vertices.push(new THREE.Vector3(startX, startY, 0)); //closepath
var doubleSquare1 = new THREE.Geometry();
doubleSquare1.vertices.push(
new THREE.Vector3(startX + 4, startY- 4 , 0),
new THREE.Vector3(endX -4, startY- 4, 0),
new THREE.Vector3(endX - 4, endY +4, 0),
new THREE.Vector3(startX + 4, endY + 4, 0),
new THREE.Vector3(startX + 4, startY -4 , 0)
);
THREE.GeometryUtils.merge( combined, doubleSquare );
THREE.GeometryUtils.merge( combined, doubleSquare1 );
var display = new THREE.Line(combined, new THREE.LineBasicMaterial({ color: color }));
return display;
}
Type 2 (In the code below, only a single object is visible instead of two)
function doubleSquareDraw(startX, startY, endX, endY, color){
var combined = new THREE.Geometry();
var square1 = new THREE.Shape();
square1.moveTo(startX, startY, 0);
square1.lineTo(endX, startY, 0);
square1.lineTo(endX, endY, 0);
square1.lineTo(startX, endY, 0);
square1.lineTo(startX, startY, 0);
var square2 = new THREE.Path();
square2.moveTo(startX + 4 , startY - 4 , 0);
square2.lineTo(endX - 4 , startY - 4 , 0);
square2.lineTo(endX - 4 , endY + 4 , 0);
square2.lineTo(startX + 4 , endY + 4 , 0);
square2.lineTo(startX + 4 , startY - 4 , 0);
square1.holes.push( square2);
var geometry = new THREE.BufferGeometry().setFromPoints(square.getPoints());
var square = new THREE.Line(geometry, new THREE.MeshBasicMaterial({
color: color
}));
return display;
}