Question

要显示机架结构，请将一个盒子放在另一个盒子上。但是y位置计算失败。当前会在框之间产生间隙。请告知如何解决，无论是相机效果还是光线效果造成问题。根据机架尺寸，更改y位置。数据包含大小和起始位置。

```

            var data = [{"id": 10075,"size": 3,"slotNumber": 1},{"id": 10174,"size": 7,"slotNumber": 4}];
            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 );
                
                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 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;
            }
        
```

Answer 1

我尝试了您的代码，发现对象位置和对象高度之间存在误解，无法将它们堆叠在一起。

您为yPosition使用了一个变量，并且需要两个变量，原因是几何是根据其轴心定位的，因此这意味着15单位的高度网格位于{{1} }它将确实放置在y=0位置下方的-7.5单位处，并且几何图形的上侧将位于y=0。因此，需要（概念上）将下一个要堆叠的插槽放置在7.5上。

这就是为什么您对到y位置的下一个插槽的计算错误的原因。我已使用解决方案创建了此fiddle，并且在y = 7.5 + (topSlotHeight / 2)处添加了gridHelper供您参考，并在y=0中添加了以便更好地进行检查。现在，它可以像这样完美地工作，将上一个插槽的累积基本位置存储在OrbitControls中，并将该插槽的yBaseHeight存储在顶部：

yPosition

PD。-我看到您开始在var slotHeight = (slotSize * slotWidth); yPosition = yBaseHeight + (slotHeight / 2); yBaseHeight = yBaseHeight + slotHeight;处放置对象，我从y=-42开始，以显示更好的效果。

Three.js将一个盒子放在另一个盒子上

1 个答案: