根据距离动态绘制棱镜

Question

我想绘制一个八角形棱镜，它也可以是倾斜的，它的面部形状和高度取决于可变和边长。我从哪里开始？

考虑到基础A是固定的，我可以使用一些函数计算基本B坐标：

。

PS：基数A和基数B等于。

Answer 1

取决于您使用的几何类型。为简单起见，有一个通常几何（THREE.CylinderGeometry()）的例子：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 2, 10);
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);

scene.add(new THREE.GridHelper(10, 10));

var prismGeom = new THREE.CylinderGeometry(1, 1, 4, 8, 1);
for(let i=0; i< 8;i++){// upper base
  prismGeom.vertices[i].y = 1 + THREE.Math.randFloat(-1, 1);
}
prismGeom.vertices[prismGeom.vertices.length - 2].y = 1 + THREE.Math.randFloat(-1, 1);// center of the upper base
prismGeom.translate(0, 2, 0);

var prism = new THREE.Mesh(prismGeom, new THREE.MeshBasicMaterial({color: "yellow", wireframe: true}));
scene.add(prism);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

如果要使用缓冲区几何体，则可以使用THREE.BufferAttibute()方法访问顶点坐标，例如.setX，.setY，.setZ等等