Question

在同一个位置？

这是我的代码：

var cubeGeometry1 = new THREE.BoxGeometry(20,20,20);
var cubeMesh1 = new THREE.Mesh(cubeGeometry1, material1);

var cubeGeometry2 = new THREE.BoxGeometry(20, 20, 20);
var cubeMesh2 = new THREE.Mesh(cubeGeometry2, material1);

scene.add(cubeMesh1);
scene.add(cubeMesh2);

以下是我需要连接在一起的两个顶点。我需要找到它们之间的中间世界坐标，一旦完成，我需要将它们彼此相互转换（实际上将它们合并到同一个位置）

var myPoint1 = cubeGeometry1.vertices[0];
var myPoint2 = cubeGeometry2.vertices[5];

这是我到目前为止所做的 - 虽然这不起作用，我不完全理解代码。

function getPointInBetweenByPerc(pointA, pointB, percentage)
{
    var dir = pointB.clone().sub(pointA);
    var len = dir.length();
    dir = dir.normalize().multiplyScalar(len*percentage);

    return pointA.clone().add(dir);
}
var pointToTransform = getPointInBetweenByPerc(myPoint1, myPoint2, 0.5);
console.log(pointToTransform);
cubeGeometry1.vertices[0].x = pointToTransform.x; //only applies to local matrix?
cubeGeometry2.vertices[5].x = pointToTransform.x;

我只是想将几何A中的顶点A与几何B中的顶点B合并。

Answer 1

如果我找到了你，你可以使用.localToWorld()，.worldToLocal()方法：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-2, 3, 5);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.append(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var box1 = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));
box1.position.set(0, 0, 0);
scene.add(box1);

var box2 = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({
  color: "blue",
  wireframe: true
}));
box2.position.set(1, 2, 3);
scene.add(box2);

btnMerge.addEventListener("click", function() {

  let vertex1 = box1.localToWorld(box1.geometry.vertices[0].clone());
  let vertex2 = box2.localToWorld(box2.geometry.vertices[3].clone());

  let midPoint = vertex1.add(vertex2).multiplyScalar(0.5);

  box1.geometry.vertices[0].copy(box1.worldToLocal(vertex1.copy(midPoint)));
  box2.geometry.vertices[3].copy(box2.worldToLocal(vertex2.copy(midPoint)));

  box1.geometry.verticesNeedUpdate = true;
  box2.geometry.verticesNeedUpdate = true;

}, false);

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>
<button id="btnMerge" style="position: absolute;">Merge</button>

如何连接两个单独的顶点，每个顶点属于两个不同的几何？

1 个答案: