Placing one box upon other

Questions
,
1

To display rack structure, placing one box upon another. But yPosition calculation fails. Currently creates gap between boxes. Please inform how could it be fixed.

<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { display: block; }
		</style>
	</head>
	<body>
		<script src="node_modules/three/build/three.min.js"></script>
		<script src="node_modules/three/examples/js/controls/OrbitControls.js"></script> 

		<script>

			var camera, scene, renderer;

			var data = [{"id": 10075,"size": 3,"slotNumber": 1},{"id": 10174,"size": 7,"slotNumber": 4}];

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

			init();
			
			function init() {
				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x999999 );

				var light = new THREE.AmbientLight( 0xffffff );
				light.position.set( 0.5, 1.0, 0.5 ).normalize();

				scene.add( light );

				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
				camera.position.fromArray([0, 0, 140]);
				scene.add( camera );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );
				
				var controls = new THREE.OrbitControls( camera, renderer.domElement );
				controls.enableZoom = true;
				controls.enablePan = true;
				controls.addEventListener( 'change', render );
				controls.update(); 
			
				rackListGroup = new THREE.Mesh();
				rackListGroup.name = "Rack List"
				var i;

				for (i = 0; i < 1; i++) {
					rackListGroup.add(drawRack(10, i))
				}
								 
				scene.add(rackListGroup);
				render();

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

				render();

			}

			function render() {

				renderer.render( scene, camera );

			}
			
			function drawRack(size, rackNo){
				var rackGroup = new THREE.Group();
				rackGroup.name = "rack "+rackNo;
				var yPosition = -42;
				var xPosition = -20 + parseInt(rackNo)*40;
				var slot = 1, counter = 0;
				var slotWidth = 5;
				while(slot <= parseInt(size)){
					var slotSize = data[counter].size;
					slot = slot + slotSize;
					yPosition = yPosition + slotSize* slotWidth;
					
					var geometry = new THREE.BoxGeometry( 30, slotWidth*slotSize, 5 );
					var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
					var shape = new THREE.Mesh( geometry, material );
					shape.name = data[counter].name;
					shape.position.set(xPosition, yPosition, 0);
					rackGroup.add(shape);
					
					var boxGeometry = new THREE.BoxBufferGeometry( 30, slotWidth*slotSize, 5, 1, 1, 1 );
					var boxMaterial = new THREE.MeshBasicMaterial( { wireframe:true } );
					var box = new THREE.Mesh( boxGeometry, boxMaterial );
					box.name = data[counter].name;
					box.position.set(xPosition, yPosition, 0);
					rackGroup.add(box);
					
					if(counter+1 < data.length){
						counter++;
					}
				}
				return rackGroup;
			}
		</script>
	</body>
</html>
2

I’ve looked at your drawRack() function but unfortunately I don’t understand what you are trying to do. Please explain in more detail the purpose of the function (e.g. by commenting all non-trivial lines of code).

3

In drawRack function, trying to draw two boxGeometry objects, one of size 3, other of size 7. Objects has to be placed one upon other. Facing problem in y position calculation. x position remain same for both objects. BoxGeometry object height for single slot is 5, so adjusting the yposition as slotHeight * 5 so that one object will be placed upon other. But there is gap between two boxGeometry objects due to y position calculation problem. For drawing outline to separate two objects using BoxBufferGeometry material wireframe.

4

/cc

5

Looking for a solution. Already tried for long time. In 2d, same calculation works, but in 3d there is some calculation problem due to camera or lighting effect.

6

It seems an answer was already provided at stackoverflow. Here is what I figured out in parallel:

https://jsfiddle.net/c6rted53/1/

1 Like
7

Thank you very much.