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中的情况完全相同（首先是轮廓线，然后是轮廓和线条的线）。

＆＃13;

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

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

＆＃13;

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

＆＃13;

Answer 2

如果要使用单个几何体渲染双线，则需要使用THREE.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

如何将`object1`变成`object2`加入Three.js？

2 个答案: