three.js所素画家例如

我试图使用three.js所，并一直在寻找一些例子，Voxel Painter exmaple three.js所素画家例如

我想要得到它，这样你每次点击创建一个新的立方体卷网格总是会移动到粘贴的立方体顶部，而不是位于当前鼠标位置的相交点...

所有源代码都可以从链接中查看，但我相信我是什么试图做与此有关...

你点击鼠标添加一个Voxel，当onMouseDown（）函数被激活时，它会检查curre nt鼠标位置与平面相交，并且如果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);与该交点新的体素位置处的传递。

这是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)但我似乎无法得到它的权利..

可能有人请点我在正确的方向？

谢谢。

来源

2013-12-23 Scott

有几种方法可以做到这一点。我不打算把这个答案涂在糖上，因为坦率地说，对这段代码进行逆向工程会对你有所帮助。我会说，在我自己使用这个体素代码的时候，重要的是你了解当你点击鼠标按钮并创建一个新的体素盒时会发生什么。

你的理解是正确的，这个功能实际上是取当前的鼠标位置和创建框。当点击完成并且盒子已经制作好时，过程重新开始，程序再次查看鼠标的位置并放置Ghost框。在这种情况下，Ghost盒子不在以前制作的盒子的顶部，所以你必须手动移动鼠标几个像素才能将它放在那里。

与其直接与setVoxelPosition函数混淆，我建议您“临时更改与您的计算机的矩阵相交的鼠标位置相关的幻影的x，y，z位置。点击成功后，增加此matrixIntersects对象的matrixIntersect.x .y .z属性，仅增加一点这些值，以便在单击后直接获得您想要的'box-on-top'效果。请记住，当用户鼠标移出对象时，请将其更改回来，否则Ghost框将不再位于鼠标正下方，并且如果这些属性在每次单击后都会增长，则事情可能会变得杂乱无章。

来源

2014-02-28 23:36:00

three.js所素画家例如

回答

相关问题