Question

我创建了两个对象doubleSquare和doubleSquare1。我期望输出Double Line Square Object。我尝试过两种格式但没有得到预期的输出。请给我解决方案。我在做网站分析时看到了很多例子。我在代码中做错了什么？

Type 1（在下面的代码doubleSquare中，closepath以另一个对象draw开始。如何拆分？）

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;
}

类型2（在下面的代码中，只有单个对象可见，而不是两个）

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;
    }

Answer 1

如果你仔细研究这个example的源代码，那么你会看到，形状和它们的孔的线是分开绘制的。

例如，形状arcShape：

我们设置了形状及其洞here
我们将该形状传递给addShape( arcShape, extrudeSettings, 0x804000, 150, 0, 0, 0, 0, 0, 1 );
在addShape内，我们调用addLineShape( shape, color, x, y, z, rx, ry, rz, s );，绘制形状的外轮廓线;
要绘制圆圈内的孔，我们调用addLineShape()，在第一个参数中传递该孔的路径。 Here

从我在你的代码中看到的，你认为，如果你设置一个形状及其孔，然后用new THREE.BufferGeometry().setFromPoints(shape.getPoints())创建一个缓冲几何，那么你会得到一个形状的轮廓线和它的孔的轮廓线。你错了，因为事情有所不同。

怎么做`parentobject1`到`childobject2`，`childobject3`添加或绘制在Three.js？

1 个答案: