Three.js cylinder example keeps drawing torus - three.js

Question

I'm attempting to get a basic THREE.js example to work and modify it from there on out but it just keeps outputting a torus, no matter what I change.
I've copied the exact code from the docs page into a JSFiddle and again I get a torus.
Here is the docs page example:
CylinderGeometry
And here is the jsfiddle with the torus: https://jsfiddle.net/ded9grxn/
I've tried adding the code from the docs page to the example like so:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshPhongMaterial(
{
color: 0x156289,
emissive: 0x072534,
side: THREE.DoubleSide,
shading: THREE.FlatShading
});
mesh.add(
new THREE.Mesh(
geometry,
material
)
);
But to no avail. Any help is appreciated!

Answer 1

The reason you fiddle does not work is that the script you invoke (https://threejs.org/docs/scenes/js/geometry.js) looks at the hash in the URL of the window to select the object.
If you go to
https://threejs.org/docs/scenes/geometry-browser.html#CylinderGeometry
you get the cylinder.
If you go to
https://threejs.org/docs/scenes/geometry-browser.html
you get the default, which is a torus.
For the reason why your modification does not work, we need more information about how you performed the modif (what did you remove, where did you add).
(Edit) in the fiddle, after doing your modification, do not forget to remove the line
var options = chooseFromHash( mesh );
this is where your script invokes the function in geometry.js that will set the mesh according to the hash in the URL