तीन.js - बफ़रगोमेट्री से कुछ कगार / चेहरे को हटा दें

Aug 16 2020

मैंने new THREE.PlaneBufferGeometry(100, 100, 100, 100);निम्न की तरह मेष के आकार को बदलने के लिए कोने की स्थिति को अपडेट करने में सक्षम किया है:

मैंने इस चर्चा का अनुसरण करके यह हासिल किया: थ्रीज्स ड्रैग पॉइंट्स

मैं क्या देख रहा हूं?

मैं एक चेहरे को बाहर निकालने में सक्षम होना चाहता हूं (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);

और मुझे यह मिल गया:

मैं उम्मीद कर रहा था कि सभी कोने विमान के साथ विलय हो गए, एक सपाट विमान छोड़ दिया। मैंने परीक्षण उद्देश्यों के लिए ऐसा किया था, लेकिन यह केवल एक कोने में विलय हो गया।

मैंने कई के साथ एक "क्यूब" का निर्माण शुरू किया और उन्हें सही स्थान पर रखा, फिर से लागू करने के लिए BufferGeometryUtils.mergeVertices, लेकिन कोने सही ढंग से विलय नहीं करते हैं:

2 संपादित करें / प्रगति

जैसा कि मैंने कहा: मैं मैन्युअल रूप से क्रियाओं और मानदंडों को संशोधित करके इसे बनाने PlaneBufferGeometryऔर निकालने में कामयाब रहा ,https://threejs.org/docs/#api/en/core/BufferGeometry

Extruded plane में सभी कोने जुड़े हुए हैं, इसलिए जब भी मैं किसी एक शीर्ष को खींचता हूँ तो यह एक पूरा टुकड़ा खींच लेता है, अब समस्या यह है कि मुझे इससे बचने के लिए मूल ग्रिड से इन नए सिरे को जोड़ना होगा:

लक्ष्य सभी कोने को मर्ज करना है, अब मुझे नए एक्सट्रूडेड टुकड़े के साथ बेस प्लेन को मर्ज करने का तरीका खोजने की जरूरत है।

3 / संपादित करें

मैंने इसे बनाया है, मैं जवाब दूंगा जब मेरे पास कुछ समय होगा। मैंने आज पूरा दिन इन पर बिताया, और पहले से ही बहुत थका हुआ था।

जवाब

MarekPiotrowski Aug 16 2020 at 02:32

निश्चित नहीं है कि आपको क्या चाहिए, लेकिन यहां आपके द्वारा निर्दिष्ट उत्तर से संशोधित उदाहरण है (कृपया माउसव्यू कार्यान्वयन में अंतर देखें)। मैंने इसे केवल दो बिंदुओं के लिए बढ़ाया है, लेकिन मेरा मानना ​​है कि आपको यह विचार प्राप्त करना चाहिए:

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>