Three.js-BufferGeometryから特定の頂点/面を押し出します

Question

を作成し、new THREE.PlaneBufferGeometry(100, 100, 100, 100);頂点の位置を更新して、次のようにメッシュの形状を変更することができました。

私はこの議論に従うことによってこれを達成しました：Threejsドラッグポイント

私は何を探していますか？

顔を押し出すことができるようにしたいので（4つの頂点をつかむ）、次のようなことを実現します。

を使用して単一のメッシュとしてエクスポートするため、すべてを同じメッシュの一部として保持し、クリーンに保ちたいと思いColladaExporterます。

編集

これを実現するには、頂点のクローンを作成して上向きに押し出す必要があります。これは、4つの新しい頂点を追加し、それらを接続することを意味します。

私はこれを試しました：

var geo = new THREE.PlaneBufferGeometry(1, 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);

そして私はこれを手に入れました：

すべての頂点が平面にマージされ、平面が残ることを期待していました。私はこれをテスト目的で行いましたが、1つのコーナーしかマージしませんでした。

複数の「立方体」を作成し、それらを適切な場所に配置してから再度適用し始めましたBufferGeometryUtils.mergeVerticesが、頂点が正しくマージされていないようです。

編集2 /進捗状況

次のように、頂点と法線を手動で変更することで、を作成しPlaneBufferGeometryて押し出すことができました。https://threejs.org/docs/#api/en/core/BufferGeometry

押し出された平面にはすべての頂点が接続されているため、1つの頂点をドラッグすると、ピース全体がドラッグされます。これを回避するには、これらの新しい頂点を元のグリッドに接続する必要があります。

目標はすべての頂点をマージすることです。次に、ベース平面を新しい押し出しピースとマージする方法を見つける必要があります。

編集3 /完了

できました。時間があれば回答を投稿します。今日は一日中これらに費やしましたが、すでにとても疲れていました。

Answer 1

それが必要かどうかはわかりませんが、参照した回答から変更された例を次に示します（mouseMoveの実装の違いに注意してください）。私はそれを2つのポイントだけに拡張しましたが、あなたはアイデアを得る必要があると信じています：

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, 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>