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

Question

我正在使用 ThreeJS git 存储库中的体素画家示例。

我已将网格大小更改为 5x5。然而，这样做意味着翻滚网格不会固定在网格上，而是在不同的网格方块上超过 4 个一半。

我还需要能够将网格大小更改为 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();
  }

Codepen: http://codepen.io/anon/pen/RPrxOX

Answer 1

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

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

根据您需要的尺寸更改这些值。

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

ThreeJS place voxel on grid with selected size

javascript

canvas

voxel

three.js