使用three.js在两个管几何之间绘制平面

Question

我有两个使用THREE.CatmullRomCurve3()点创建的TubeBufferGeometry。 我想要做的是填充这两个管之间的区域。

var closedSpline = new THREE.CatmullRomCurve3( [
new THREE.Vector3( -60, -100,  0 ),
new THREE.Vector3( -60,   20,  0 ),
new THREE.Vector3( -60,  120,  0 ),
new THREE.Vector3(  60,   120, 0 ),
new THREE.Vector3(  60, -100, 0 )] );
closedSpline.curveType = 'catmullrom';
closedSpline.closed = true;

var closedSpline1 = new THREE.CatmullRomCurve3( [
new THREE.Vector3(-50, -90,  0),
new THREE.Vector3(-50, 10,  0 ),
new THREE.Vector3(-50, 110,  0 ),
new THREE.Vector3(50, 110, 0 ),
new THREE.Vector3(50, -90, 0 )
] );
closedSpline1.curveType = 'catmullrom';
closedSpline1.closed = true;

var tubeGeometry = new THREE.TubeBufferGeometry( closedSpline, 100, 1,5, true 
);

var material = new THREE.MeshLambertMaterial( { color: 0xb00000, wireframe: 
false } );
var mesh = new THREE.Mesh( tubeGeometry, material );
scene.add( mesh );

var tubeGeometry1 = new THREE.TubeBufferGeometry( closedSpline1, 100, 1,5, 
true );

var material1 = new THREE.MeshLambertMaterial( { color: 0xb00000, wireframe: 
false } );
var mesh1 = new THREE.Mesh( tubeGeometry1, material1 );
scene.add( mesh1 );

上面是创建两个管几何的代码。 任何人都可以指导我正确的方向或任何相关的例子来填充两个管之间的区域。感谢

在这张图片中，我工作了两个红色管。我正在寻找一种方法在这两个管之间绘制平坦的黄色区域。

Answer 1

作为一种选择，您可以使用带有洞的THREE.Shape()：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 300);
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);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(100);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var closedSpline = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-60, -100, 0),
  new THREE.Vector3(-60, 20, 0),
  new THREE.Vector3(-60, 120, 0),
  new THREE.Vector3(60, 120, 0),
  new THREE.Vector3(60, -100, 0)
]);
closedSpline.curveType = 'catmullrom';
closedSpline.closed = true;

var closedSpline1 = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-50, -90, 0),
  new THREE.Vector3(-50, 10, 0),
  new THREE.Vector3(-50, 110, 0),
  new THREE.Vector3(50, 110, 0),
  new THREE.Vector3(50, -90, 0)
]);
closedSpline1.curveType = 'catmullrom';
closedSpline1.closed = true;

var tubeGeometry = new THREE.TubeBufferGeometry(closedSpline, 100, 1, 5, true);

var material = new THREE.MeshLambertMaterial({
  color: 0xb00000,
  wireframe: false
});
var mesh = new THREE.Mesh(tubeGeometry, material);
scene.add(mesh);

var tubeGeometry1 = new THREE.TubeBufferGeometry(closedSpline1, 100, 1, 5,
  true);

var material1 = new THREE.MeshLambertMaterial({
  color: 0xb00000,
  wireframe: false
});
var mesh1 = new THREE.Mesh(tubeGeometry1, material1);
scene.add(mesh1);

// magic starts here
var shape = new THREE.Shape(closedSpline.getPoints(100)); // make a shape
shape.holes.push(new THREE.Path(closedSpline1.getPoints(100))); // add a hole
var shapeGeometry = new THREE.ShapeGeometry(shape); // create a geometry
var track = new THREE.Mesh(shapeGeometry, new THREE.MeshLambertMaterial({
  color: "yellow",
  wireframe: false
})); // create a track from the geometry
scene.add(track);

render();

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>