使用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>