Three.js-从BufferGeometry拉伸某些顶点/面

问题描述

我制作了new THREE.PlaneBufferGeometry(100,100,100);，并且能够更新顶点的位置以更改网格的形状，如下所示：

我通过以下讨论实现了这一目标：Threejs drag points

我在寻找什么？

我希望能够拉伸一张脸（抓住4个顶点），所以我实现了以下目标：

我想将其全部保留在同一网格中，以保持其清洁，因为我将使用ColladaExporter将其导出为单个网格。

修改

为了实现这一点，我需要克隆顶点并将其向上拉伸。这意味着添加4个新顶点并将它们连接在一起。

我尝试过：

var geo = new THREE.PlaneBufferGeometry(1,1,1);
geo.rotateX(-Math.PI * 0.5);
geo.translate(0,0.5,0);

//And the merge them together
var newplane = BufferGeometryUtils.mergeBufferGeometries([plane,geo]);
newplane = BufferGeometryUtils.mergeVertices(newplane,1);

我明白了：

我希望所有顶点都与平面合并，从而留下一个平面。我这样做是出于测试目的，但它只合并了一个角。

我开始构建具有多个的“多维数据集”并将它们放置在正确的位置，然后再次应用BufferGeometryUtils.mergeVertices，但顶点似乎无法正确合并：

编辑2 /进度

我设法创建了PlaneBufferGeometry并通过手动修改顶点和法线来拉伸，如https://threejs.org/docs/#api/en/core/BufferGeometry

所述。

拉伸平面连接了所有顶点，因此，每当我拖动一个顶点时，它都会拖动整块，现在的问题是我需要将这些新顶点连接到原始网格，以避免这种情况：

目标是合并所有顶点，现在我需要找到一种方法将基础平面与新的拉伸零件合并。

编辑3 /完成

我成功了，我会在有空的时候发布答案。我今天整天都花这些时间，已经很累了。

解决方法

不确定是否正是您所需要的，但这是您所参考答案的修改示例（请注意mouseMove实现的不同）。我仅将其扩展了两点，但我相信您应该明白这一点：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,1,1000);
camera.position.set(1.25,7,7);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.PlaneBufferGeometry(10,10,10);
geometry.rotateX(-Math.PI * 0.5);

var plane = new THREE.Mesh(geometry,new THREE.MeshBasicMaterial({
  wireframe: true,color: "red"
}));
scene.add(plane);

var points = new THREE.Points(geometry,new THREE.PointsMaterial({
  size: 0.25,color: "yellow"
}));
scene.add(points);


var raycaster = new THREE.Raycaster();
raycaster.params.Points.threshold = 0.25;
var mouse = new THREE.Vector2();
var intersects = null;
var plane = new THREE.Plane();
var planeNormal = new THREE.Vector3();
var currentIndex = null;
var planePoint = new THREE.Vector3();
var dragging = false;

window.addEventListener("mousedown",mouseDown,false);
window.addEventListener("mousemove",mouseMove,false);
window.addEventListener("mouseup",mouseUp,false);

function mouseDown(event) {
  setRaycaster(event);
  getIndex();
  dragging = true;
}

function mouseMove(event) {
  if (dragging && currentIndex !== null) {
    setRaycaster(event);
    raycaster.ray.intersectPlane(plane,planePoint);
    var indicesToMoveUp = [currentIndex-1,currentIndex];
         var delta_x = geometry.attributes.position.getX(currentIndex) - planePoint.x;
      geometry.attributes.position.setXYZ(currentIndex,planePoint.x,planePoint.y,planePoint.z);
      geometry.attributes.position.needsUpdate = true;
     var old_x_neighbour = geometry.attributes.position.getX(currentIndex - 1);
    geometry.attributes.position.setY(currentIndex-1,planePoint.y);
    geometry.attributes.position.setZ(currentIndex-1,planePoint.z);
    geometry.attributes.position.setX(currentIndex-1,old_x_neighbour - delta_x);
    geometry.attributes.position.needsUpdate = true;
  }
}

function mouseUp(event) {
  dragging = false;
  currentIndex = null;
}

function getIndex() {
  intersects = raycaster.intersectObject(points);
  if (intersects.length === 0) {
    currentIndex = null;
    return;
  }
  currentIndex = intersects[0].index;
  setPlane(intersects[0].point);
}

function setPlane(point) {
  planeNormal.subVectors(camera.position,point).normalize();
  plane.setFromNormalAndCoplanarPoint(planeNormal,point);
}

function setRaycaster(event) {
  getMouse(event);
  raycaster.setFromCamera(mouse,camera);
}

function getMouse(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

render();

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>