.rotation doesn't work past a certain amount of degrees

Questions
1

I am trying to rotate some meshes around the y-axis.

.rotation(…); doesn’t seem to work the whole 360 degrees.

I am using https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js

My code can be found at https://codepen.io/michielschukking/pen/NPxzPoB?editors=0010

const scene = new THREE.Scene();

const geometry = new THREE.BufferGeometry();

const vertices = new Float32Array( [
	   0,    0,  0, // v0
	 3.0,    0,  0, // v1
	 3.0,  5.0,  0, // v2
	   0,  5.0,  0, // v3
] );

const indices = [
	0, 1, 2,
	2, 3, 0,
];

geometry.setIndex( indices );
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );

const material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
const mesh0 = new THREE.Mesh( geometry, material );
mesh1 = mesh0.clone();
mesh2 = mesh0.clone();
mesh3 = mesh0.clone();
mesh4 = mesh0.clone();
mesh5 = mesh0.clone();
mesh1.rotation.y = THREE.MathUtils.degToRad(60);
mesh2.rotation.y = THREE.MathUtils.degToRad(120);
mesh3.rotation.y = THREE.MathUtils.degToRad(180);
mesh4.rotation.y = THREE.MathUtils.degToRad(240);
mesh5.rotation.y = THREE.MathUtils.degToRad(300);

scene.add(  mesh0, 
            mesh1, 
            mesh2, 
            mesh3, 
            mesh4, 
            mesh5 
         );

renderer.render( scene, camera );

mesh2 up to mesh4 don’t work. Very strange, should I find another version of three.js?

2 Likes
2

The rotation does work, but you’re now looking at the backside of the geometry, which is not visible by default. Try adding side: THREE.DoubleSide to the material.

3 Likes
3

Thank you, would have never been able to find that myself!

4

In your codepen, you collect three and OrbitControls from various sources.
(https://klevron.github.io/codepen/three.js/OrbitControls.js
https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js )
This can quickly lead to problems.

Take a look at some of the very clear examples from Collection of examples from discourse.threejs.org.

Especially the newer codepen sources, which can always be found at the top of the source code of the examples.
E.g. in 2025 discourse.threejs.hofk.de

  • HollowCylinder[merged] - @author prisoner849
  • CustomCameraRotationLogic - @author PavelBoytchev
1 Like