CODEWITHSUNDEEP
javascriptgraphicsthree.js
gaj
gaj

Reputation: 327

Creating a cylinder with slanted bottom

I want to create a cylinder with slanted bottom shape in three.js. I don't see any direct way to create such geometry in three.js. I tried to see if I can cut the cylinder by a slanted plane, but could not find such operation in the documentation. Can anybody suggest a way to create this?

Upvotes: 1

Views: 349

Answers (1)

prisoner849
prisoner849

Reputation: 17586

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://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Upvotes: 2

Related Questions