Javascript 如何将'object1'添加到'object2'中并添加到Three.js中？

我创建了两个对象

square1

和

square2

对象。我期望输出

双线方形对象

。但只有一个正方形的物体是可见的。如何创建这个可见的双线正方形对象

下面是我的代码

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 + 10 , startY  - 10 , 0);
       square2.lineTo(endX - 10 , startY - 10 , 0);
       square2.lineTo(endX - 10, endY + 10 , 0);
       square2.lineTo(startX + 10 , endY + 10 , 0);
       square2.lineTo(startX + 10 , startY  - 10 , 0);
       square1.holes.push( square2);

       var scene = new THREE.Scene();
       var group = new THREE.Group();
       group.position.y=50;
       scene.add(group);


      var points = square1.getPoints();
      var geometry = new THREE.Geometry().setFromPoints( points );
      var display = new THREE.Line(geometry, new THREE.LineBasicMaterial({
            color: color
        }));
       group.add( display );
        return display;
}

---

有很多方法可以达到预期的效果。其中之一就是使用两个分开的

THREE.LineLoop（）

，实际上，情况与此完全相同（首先是轮廓线，然后是轮廓孔线）

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，window.innerWidth/window.innerHeight，0.011000）；
摄像机位置设置（0,0,10）；
var renderer=new THREE.WebGLRenderer({
反别名：对
});
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
添加（drawDoubleRect（新的3.Vector2（-5，-4），新的3.Vector2（5,4），1，“黄色”）；
函数drawDoubleRect（开始、结束、宽度、颜色）{
var group=新的三个.group（）；
添加（drawRect（开始、结束、颜色））；
add（drawRect（start.addScalar（宽度）、end.subScalar（宽度）、颜色））；
返回组；
}
函数drawRect（开始、结束、颜色）{
变量点=[
新的3.Vector2（start.x，start.y），
新的三个矢量2（开始x，结束y），
新的三矢量2（end.x，end.y），
新的3.Vector2（end.x，start.y）
]
var line=new THREE.LineLoop（new THREE.BufferGeometry（）.setFromPoints（points），new THREE.LineBasicMaterial({
颜色：颜色
}));
回流线；
}
render（）；
函数render（）{
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}

正文{
溢出：隐藏；
保证金：0；
}

---

如果要使用单个几何体渲染双线，则需要使用

三个.LineSegments

function doubleSquareDraw( startX, startY, endX, endY, color ) {

    var v = [];

    function addSquare( startX, startY, endX, endY ) {

        v.push( new THREE.Vector3( startX, startY, 0 ), new THREE.Vector3( endX,   startY, 0 ) );
        v.push( new THREE.Vector3( endX,   startY, 0 ), new THREE.Vector3( endX,     endY, 0 ) );
        v.push( new THREE.Vector3( endX,     endY, 0 ), new THREE.Vector3( startX,   endY, 0 ) );
        v.push( new THREE.Vector3( startX,   endY, 0 ), new THREE.Vector3( startX, startY, 0 ) );

    }

    addSquare( startX, startY, endX, endY );

    addSquare( startX + 10, startY + 10, endX - 10, endY - 10 );

    var geometry = new THREE.BufferGeometry().setFromPoints( v );

    var doubleLineSquare = new THREE.LineSegments( geometry, new THREE.MeshBasicMaterial( { color: color } ) );

    return doubleLineSquare;

}

var doubleSquare = doubleSquareDraw( 100, 50, 200, 200, 0xff00ff );

scene.add( doubleSquare );

---

three.js r.89

不是答案，只是建议：仔细阅读方法，注意它们采用了什么参数和多少参数。请给我答案。我搜索了很多网页。@prisoner849请检查。这个代码有什么错？。下面是我的代码。@karthick1870您是否检查了我回答中提到的示例？