Question

我试图在three.js中构建一个扁平形状的集合。每一个都被定义为一系列共面Vector3点，但形状并非都是共面的。想象一下，两个扁平的矩形作为房屋的屋顶，但形状要复杂得多。

我可以制作平面Shape对象，然后旋转并定位它们，但由于我的形状是在3d坐标中构思的，所以将它全部保存在3空间中会简单得多，而Shape对象并不喜欢

是否有一些更直接的方法可以简单地指定一个共面Vector3的数组，并让three.js完成剩下的工作？

Answer 1

我想到了这个问题并提出了这个想法，当你有一组共面点并且你知道飞机的法线时（让它命名为normal），你的积分属于。

1）我们需要旋转我们的点集使其平行于xy平面，因此该平面的法线为[0, 0, 1]（让它命名为normalZ）。为此，我们找到.setFromUnitVectors() THREE.Quaternion()的四元数：

var quaternion = new THREE.Quaternion().setFromUnitVectors(normal, normalZ);
var quaternionBack = new THREE.Quaternion().setFromUnitVectors(normalZ, normal);

2）将quaternion应用于我们的点数

3）由于它现在与xy平面平行，点的z坐标并不重要，因此我们现在可以创建它们的THREE.Shape()个对象。然后从给定的形状创建THREE.ShapeGeometry()（将其命名为shapeGeom），这将对我们的形状进行三角测量。

4）我们需要将我们的观点恢复到原来的位置，因此我们将quaternionBack应用于他们。

5）毕竟，我们会将我们的点数分配给.vertices的{{1}}属性。

那就是它。如果它适合您，请告诉我;）

＆＃13;

shapeGeom

＆＃13;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 20, 40);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target = new THREE.Vector3(10, 0, 10);
controls.update();

var grid = new THREE.GridHelper(50, 50, 0x808080, 0x202020); // xy-grid
grid.geometry.rotateX(Math.PI * 0.5);
scene.add(grid);

var points = [ // all of them are on the xz-plane
	new THREE.Vector3(5, 0, 5),
  new THREE.Vector3(25, 0, 5),
  new THREE.Vector3(25, 0, 15),
  new THREE.Vector3(15, 0, 15),
  new THREE.Vector3(15, 0, 25),
  new THREE.Vector3(5, 0, 25),
  new THREE.Vector3(5, 0, 5)
]

var geom = new THREE.BufferGeometry().setFromPoints(points);
var pointsObj = new THREE.Points(geom, new THREE.PointsMaterial({
  color: "red"
}));
scene.add(pointsObj);

var line = new THREE.LineLoop(geom, new THREE.LineBasicMaterial({
  color: "aqua"
}));
scene.add(line);

// normals 
var normal = new THREE.Vector3(0, 1, 0); // I already know the normal of xz-plane ;)
scene.add(new THREE.ArrowHelper(normal, new THREE.Vector3(10, 0, 10), 5, 0xffff00)); //yellow

var normalZ = new THREE.Vector3(0, 0, 1); // base normal of xy-plane
scene.add(new THREE.ArrowHelper(normalZ, scene.position, 5, 0x00ffff)); // aqua

// 1 quaternions
var quaternion = new THREE.Quaternion().setFromUnitVectors(normal, normalZ);
var quaternionBack = new THREE.Quaternion().setFromUnitVectors(normalZ, normal);

// 2 make it parallel to xy-plane
points.forEach(p => {
  p.applyQuaternion(quaternion)
});

// 3 create shape and shapeGeometry
var shape = new THREE.Shape(points);
var shapeGeom = new THREE.ShapeGeometry(shape);

// 4 put our points back to their origins
points.forEach(p => {
  p.applyQuaternion(quaternionBack)
});

// 5 assign points to .vertices
shapeGeom.vertices = points;

var shapeMesh = new THREE.Mesh(shapeGeom, new THREE.MeshBasicMaterial({
  color: 0x404040
}));
scene.add(shapeMesh);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

＆＃13;

如何在three.js的3空间中绘制扁平形状？

1 个答案: