5

If I have a basic hollow cyclinder made using three.js like in the JSFiddle how can I change the thickness of the walls?

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 95, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.CylinderGeometry( 2, 2, 5, 360, 1, true );
var material = new THREE.MeshNormalMaterial( { color: 0x00ff00, side: THREE.DoubleSide } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.y = 5;
camera.position.z = 5;
camera.lookAt(0,0,0);

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();

JSFiddle example

geoffs3310
  • 5,599
  • 11
  • 51
  • 104
  • Do you mean something like this: https://stackoverflow.com/questions/11826798/how-do-i-construct-a-hollow-cylinder-in-three-js – Gerdon Abbink Aug 08 '18 at 11:37
  • Yeah I saw that but didn't quite understand it. So is it saying that a cyclinder can't have a thickness and if you want to have one then you have to use arcshape instead? – geoffs3310 Aug 08 '18 at 11:40

1 Answers1

3

No, you have to subtract another cylinder from a cylinder. The one you subtract from it is the inner diameter of the cylinder.

So I changed your code to this:

var outerGeometry = new THREE.CylinderGeometry(2, 2, 5, 360, 1);
var innerGeometry = new THREE.CylinderGeometry(1.5, 1.5, 5, 360, 1);
var material = new THREE.MeshNormalMaterial({
    color: 0x00ff00,
    side: THREE.DoubleSide
});

var outerCylinder = new ThreeBSP(outerGeometry);
var innerCylinder = new ThreeBSP(innerGeometry);

var hollowedCylinder = innerCylinder.union(outerCylinder);

scene.add(hollowedCylinder.toMesh(material));

Here is the fiddle: http://jsfiddle.net/gerdonabbink/tephoLr1/133/

As you can see the inner cylinder is 1.5, change this to 1 for example to make the thickness 1.

Gerdon Abbink
  • 101
  • 7