创建底部倾斜的圆柱体

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>

​