Javascript ThreeJS将体素放置在选定大小的网格上

我正在使用ThreeJS git repo中的体素画师示例

我已将网格大小更改为5x5。 但是，这样做意味着翻转网格不会固定到网格上，而是在不同的网格正方形上超过4/2

此外，我需要有可能改变网格大小为5x10或12x5或16x24和其他。 有人知道怎么做吗

这是我的代码：

  var sizeX = 300;
  var sizeY = 300;

  function init() {
    rollOverGeo = new THREE.BoxGeometry( 50, 50, 50 );
    rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xfeb74c, opacity: 0.5, transparent: true } );
    rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
    scene.add( rollOverMesh );
    // cubes
    cubeGeo = new THREE.BoxGeometry( 50, 50, 50 );
    cubeMaterial = new THREE.MeshBasicMaterial( { color: 0xfeb74c,  map: THREE.ImageUtils.loadTexture( "./wall.jpg" ) } );
    // grid
    var size = 125, step = 50;

    var geometry = new THREE.Geometry();

    for ( var i = - size; i <= size; i += step ) {

      geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
      geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );

      geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
      geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );

    }

    var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2, transparent: true } );

    var line = new THREE.Line( geometry, material, THREE.LinePieces );
    scene.add( line );

    //

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

    var geometry = new THREE.PlaneBufferGeometry( sizeX, sizeY );
    geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

  }

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

    mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( objects );

    if ( intersects.length > 0) {
      var intersect = intersects[ intersects.length - 1 ];
      rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
      rollOverMesh.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
    render();
  }

var-sizeX=300；
var sizeY=300；
函数init（）{
rollOverGeo=新的三箱几何体（50,50,50）；
rollOverMaterial=new THREE.MeshBasicMaterial（{颜色：0xfeb74c，不透明度：0.5，透明：true}）；
rollOverMesh=新的三个网格（rollOverGeo，rollOverMaterial）；
添加（滚动网格）；
//立方体
cubeGeo=新的三箱几何体（50,50,50）；
cubeMaterial=new THREE.MeshBasicMaterial（{color:0xfeb74c，map:THREE.ImageUtils.loadTexture（“./wall.jpg”）}）；
//网格
变量大小=125，步长=50；
var geometry=new THREE.geometry（）；
for（var i=-size；i 0）{
var intersect=相交[相交长度-1]；
滚动网格.位置.复制（intersect.point）.添加（intersect.face.normal）；
rollOverMesh.position.divideScalar（50.floor（））.multiplyScalar（50.addScalar（25）；
render（）；
}

---

Codepen:

您需要将立方体的位置更改为适当的大小，相应地编辑下面的行

ollOverMesh.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );

---

根据您需要的大小更改这些值。

Thx对于答案，我试图更改这些值，但我不知道应该存在哪些值。divideScalar（50）//可能是30、20、96这取决于您我还没有尝试过您的代码或示例…我假设这些值将反映所需的必要更改rollovermesh.position.divideScalar（25）.floor（）.multilyScalar（25）.addScalar（25）.divideScalar（50）.floor（）.multilyScalar（50）；rollOverMesh.position.y+=25；当网格大小为奇数（如5x5、7x7、9x9等）时，这对我很有效。很高兴听到您可能需要对其他数字进行四舍五入处理，以获得其他方程式，如我所说的，我还没有测试过，但我确信现在您已走上正确的轨道