javascript - Three.js中如何把 `object1`改成 `object2`添加？

Question

我创建了两个对象。 square1 和 square2 对象。我期望输出 Double line square object。但单个方形对象仅可见。如何做这个可见的双线方形对象？

在我的代码下面。

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

Answer 1

有很多方法可以达到预期的效果。其中之一就是使用两个分开的THREE.LineLoop()，实际上，它恰好发生在这个example中。 (首先是轮廓线，然后是轮廓孔的线)。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(drawDoubleRect(new THREE.Vector2(-5, -4), new THREE.Vector2(5, 4), 1, "yellow"));

function drawDoubleRect(start, end, width, color) {
  var group = new THREE.Group();
  group.add(drawRect(start, end, color));
  group.add(drawRect(start.addScalar(width), end.subScalar(width), color));
  return group;
}


function drawRect(start, end, color) {
  var points = [
    new THREE.Vector2(start.x, start.y),
    new THREE.Vector2(start.x, end.y),
    new THREE.Vector2(end.x, end.y),
    new THREE.Vector2(end.x, start.y)
  ]
  var line = new THREE.LineLoop(new THREE.BufferGeometry().setFromPoints(points), new THREE.LineBasicMaterial({
    color: color
  }));
  return line;
}

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>