Question

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

谢谢

Answer 1

You can operate with vertices as you want.

Just a simple concept:

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>

创建底部倾斜的圆柱体

1 个答案: