OrbitControl and partially hidden geometries

Questions
1

Hi there,

I’m trying to get working my first example of three.js. For this I wanted to implement a simple cylinder into a canvas object.

In principle all is working except the OrbitControl (or maybe it is not working as I do expect)

If I rotate my cylinder, it disappears in the background at some angle. It seems for me, that the z axis for values lower than 0 are hidden from my point of view.

I guess there is a simple solution, but I cannot see it…

My code looks at following:


<html>


   <head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
		<link rel="stylesheet" href="./css/three.css">
	
	
	


		<script type="text/javascript" src="js/three.js"></script>

	</head>
	
	<body>
		<script type="module">
			import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
			
			function starthere() {

					var scene = new THREE.Scene();


					var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
					camera.position.z = 60;

					
					var renderer = new THREE.WebGLRenderer({antialias: true});
					//renderer.setClearColor("#FFFFFF");
					renderer.setSize(window.innerWidth,window.innerHeight);

					document.body.appendChild(renderer.domElement);

					window.addEventListener('resize', () => {
						renderer.setSize(window.innerWidth,window.innerHeight);
						camera.aspect = window.innerWidth / window.innerHeight;

						camera.updateProjectionMatrix();
					})


					var raycaster = new THREE.Raycaster();
					var mouse = new THREE.Vector2();

					const orbit = new OrbitControls( camera, renderer.domElement );
					orbit.target.set(0, 0, 0);
					orbit.update();		
				
					
					//orbit.enableZoom = false;
						
					function addZylinder(s, posx, posy, posz, durchmessertop, durchmesserbottom, height, startphi, endphi, dicke){
						var geometry = new THREE.CylinderGeometry(durchmessertop/2, durchmesserbottom/2, height, 64, 64, true, startphi/360*Math.PI*2, endphi/360*Math.PI*2);
						var material = new THREE.MeshBasicMaterial( {color: 0xff0000} );		
						var cylinder = new THREE.Mesh(geometry, material);
						cylinder.position.x = posx;
						cylinder.position.y = posy;
						cylinder.position.z = posz;
						s.add(cylinder);
					}


					addZylinder(scene, 0, 0, 0, 30, 30, 60, 0, 360, 1)
					
					
					//meshX = -10;
					//for(var i = 0; i<15;i++) {
					//    var mesh = new THREE.Mesh(geometry, material);
					//    mesh.position.x = (Math.random() - 0.5) * 10;
					//    mesh.position.y = (Math.random() - 0.5) * 10;
					//    mesh.position.z = (Math.random() - 0.5) * 10;
					//    scene.add(mesh);
					//    meshX+=1;
					//}


					var light = new THREE.PointLight(0xFFFFFF, 1, 1000)
					light.position.set(0,0,0);
					scene.add(light);

					var light = new THREE.PointLight(0xFFFFFF, 1, 1000)
					light.position.set(200,200,200);
					scene.add(light);
					
					var light = new THREE.PointLight(0xFFFFFF, 1, 1000)
					light.position.set(200,200,-200);
					scene.add(light);

					
					var light = new THREE.PointLight(0xFFFFFF, 1, 1000)
					light.position.set(200,-200,200);
					scene.add(light);
					
					var light = new THREE.PointLight(0xFFFFFF, 1, 1000)
					light.position.set(-200,200,200);
					scene.add(light);					

					var render = function() {
						requestAnimationFrame(render);


						renderer.render(scene, camera);
					}

					function onMouseMove(event) {
						event.preventDefault();

						mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
						mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

						raycaster.setFromCamera(mouse, camera);

						var intersects = raycaster.intersectObjects(scene.children, true);
						for (var i = 0; i < intersects.length; i++) {
							this.tl = new TimelineMax();
							this.tl.to(intersects[i].object.scale, 1, {x: 2, ease: Expo.easeOut})
							this.tl.to(intersects[i].object.scale, .5, {x: .5, ease: Expo.easeOut})
							this.tl.to(intersects[i].object.position, .5, {x: 2, ease: Expo.easeOut})
							this.tl.to(intersects[i].object.rotation, .5, {y: Math.PI*.5, ease: Expo.easeOut}, "=-1.5")
						}
					};

					

					//window.addEventListener('mousemove', onMouseMove);
					render();
			}
			starthere()
		</script>		
	</body>



</html>

body { 
    margin: 0; 
    height: 100vh;
}
  
canvas { 
    display: block;
}

h1 {
    position: absolute;
    top: 2em;
    left: 2em;
    font-family: 'Montserrat';
    font-size: 7em;
    text-transform: uppercase;
    width: auto;
    line-height: .8em;
    border: 5px solid black;
    padding: .2em;
  }
2

Hi!

Set the far plane of the camera greater, for example, set it to 1000.
Your camera is at 60 units, but far plane is at 50, so you won’t see anything further than 50 units from the camera.

3

Hi,

thanks for reply. However: This does not help. even now the values with z<0 are cutted.

4

Try not to mix inline script with module.
Change the Camera Far.
Add double side to Material.

My_code.html (5.7 KB)

5

Hi Double Side did the trick.

Thanks a lot