Three.js-BufferGeometry에서 특정 정점 /면 돌출
나는 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);
그리고 나는 이것을 얻었다 :
나는 모든 정점이 평면과 병합되어 평평한 평면을 남기기를 바랐습니다. 테스트 목적으로이 작업을 수행했지만 한쪽 모서리 만 병합되었습니다.
다중으로 "큐브"를 만들고 올바른 위치에 배치 한 다음 다시 적용하기 시작 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, 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>