Создание цилиндра со скошенным дном

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://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>