Question

我正在尝试使用THREE.js并一直在查看一些示例，Voxel Painter exmaple

我试图让它每次点击创建一个新的立方体时，翻转网格将始终移动到刚刚粘贴的立方体顶部而不是在当前鼠标位置相交的点上。。

所有源代码都可以从链接中查看，但我相信我正在尝试做的事情与此有关...

单击鼠标添加体素，当onMouseDown（）函数处于活动状态时，它将检查当前鼠标位置是否与平面相交，以及是否已按下CTRL按钮以获取新多维数据集或删除多维数据集。

function onDocumentMouseDown( event ) {

    event.preventDefault();

    var intersects = raycaster.intersectObjects( scene.children );

    if ( intersects.length > 0 ) {

        intersector = getRealIntersector( intersects );

        // delete cube

            if ( isCtrlDown ) {

                if ( intersector.object != plane ) {

                    scene.remove( intersector.object );

            }

    } 
// create cube
else {



intersector = getRealIntersector( intersects);

setVoxelPosition( intersector );

var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
voxel.position.copy( voxelPosition );    
voxel.matrixAutoUpdate = false;
voxel.updateMatrix();

scene.add( voxel );


}

}    
}

当创建一个新的立方体时，我相信THREE.js抓住鼠标与intersector = getRealIntersector( intersects);相交的当前点，然后使用函数setVoxelPosition( intersector );设置新的体素位置，并传入交叉点。 / p>

这是setVoxelPosition函数

function setVoxelPosition( intersector ) {

      normalMatrix.getNormalMatrix( intersector.object.matrixWorld );

      tmpVec.copy( intersector.face.normal );
      tmpVec.applyMatrix3( normalMatrix ).normalize();

      voxelPosition.addVectors( intersector.point, tmpVec );

      voxelPosition.x = Math.floor( voxelPosition.x / 50 ) * 50 + 25;
      voxelPosition.y = Math.floor( voxelPosition.y / 50 ) * 50 + 25;
      voxelPosition.z = Math.floor( voxelPosition.z / 50 ) * 50 + 25;
}

和渲染循环

function render() {

    if ( isShiftDown )
    theta += mouse2D.x * 1.5;

    raycaster = projector.pickingRay( mouse2D.clone(), camera )
    var intersects = raycaster.intersectObjects( scene.children );


    if ( intersects.length > 0 ) {

    intersector = getRealIntersector( intersects );
    if ( intersector ) {

        setVoxelPosition( intersector );
        rollOverMesh.position = voxelPosition;

        }

    } 
camera.position.x = 1400 * Math.sin( THREE.Math.degToRad( theta ) );
camera.position.z = 1400 * Math.cos( THREE.Math.degToRad( theta ) );

camera.lookAt( scene.position );

renderer.render( scene, camera );

}

我试图将不同的值传递给setVoxelPosition( intersector )，但我似乎无法正确使用..

有人可以指出我正确的方向吗？

感谢。

Answer 1

有几种方法可以做到这一点。我不打算给这个答案加油，因为坦率地说，逆向工程这段代码对你有好处。我会说，自己使用这个体素代码后，了解当您单击鼠标按钮并创建一个新的体素盒时发生的情况非常重要。

你理解的是，这个函数实际上是在当前鼠标位置并创建框。当点击完成并且框已经完成时，过程重新开始，程序再次查看鼠标所在的位置并放置Ghost框。在这种情况下，Ghost框不在之前制作的框的顶部，因此您必须手动将鼠标向上移动几个像素才能将其移到那里。

我不建议直接使用setVoxelPosition函数，而是建议你'临时更改重影的x，y，z位置相对于计算机的矩阵相交鼠标位置。单击成功后，增加此matrixIntersects对象的matrixIntersect.x .y .z属性，仅增加这些值，以便在单击后直接获得所需的“box-on-top”效果。当用户鼠标离开对象时，请记得将其更改回来，否则Ghost框将不再直接位于鼠标下方，如果每次点击后这些属性都会增长，则事情会变得很乱。

THREE.js体素画家的例子

1 个答案: