创建一个底部倾斜的圆柱体

Question

我想在 three.js 中创建一个底部倾斜的圆柱体。 我看不到在 three.js 中创建此类几何图形的任何直接方法。我试图看看我是否可以通过斜面切割圆柱体，但在文档中找不到这样的操作。任何人都可以建议一种方法来创建它吗？

Answer 1

您可以根据需要对顶点进行操作。

只是一个简单的概念：

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

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var cylGeom = new THREE.CylinderBufferGeometry(1, 1, 5, 16);

var vertices = cylGeom.attributes.position;

// change upper vertices
var v3 = new THREE.Vector3(); // temp vector
for (let i = 0; i < vertices.count; i++) {
  v3.fromBufferAttribute(vertices, i); // set the temp vector
  v3.y = v3.y > 0 ? (v3.x * 0.5) + 2.5 : v3.y; // change position by condition and equation
  vertices.setY(i, v3.y); // set Y-component of a vertex
}

var cylMat = new THREE.MeshLambertMaterial({
  color: "aqua"
});
var cyl = new THREE.Mesh(cylGeom, cylMat);
scene.add(cyl);

renderer.setAnimationLoop(() => {
  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>