Question

我正在使用THREE.js。我有一个人类模型，我希望能够选择不同的部分。例如，如果单击其中一条腿，将执行特定操作。我最初的想法是将模型拆分为单独的网格，然后使用光线跟踪来确定选择了哪个对象。但是现在当我渲染场景时，沿着每个网格边缘的阴影不会与相邻的网格混合。这使得模型在可选择部分之间留下了粗糙的线条。有没有办法在我创建的网格片之间混合阴影？或者除了创建单独的网格之外，还有更好的方法来选择网格的一部分吗？我有一些编程经验，但这是我第一次尝试使用three.js。任何见解将不胜感激。

Answer 1

您可以为每个三角形创建其他属性，该属性将是它所属的bodypart的颜色。因此，左腿的所有三角形都是红色，右腿的所有三角形都是蓝色等。

正常渲染模型，并添加第二遍，您将以上述方式呈现三角形颜色，因此根本没有阴影。然后，您可以将鼠标放置在用户单击的位置，并在该部分颜色的帧缓冲区中查找，并检查用户单击的位置上的像素颜色。

这种通过为它们分配不同颜色来拾取3d对象，将这些颜色渲染到另一个纹理然后检查点击像素的颜色的技术是很常见的，尽管它有一些缺陷。另一方面，射线测试也绝对不准确。

我相信这个演示实际上是基于这个概念运行的 - demo。

Answer 2

var aiGeojj = new t.CubeGeometry(30, 30, 30);
    
var uprighters = Math.floor((Math.random() * 11)); 
    var aiMaterialjj = new t.MeshBasicMaterial({ map: t.ImageUtils.loadTexture('images/images_bots/greenbot/upright/' + uprighters + '.gif'),  opacity: 0, transparent: true });
    var ojj= new t.Mesh(aiGeojj, aiMaterialjj);
ojj.limbs = [];
ojj.trunk = [];



var aiGeojjkey2c = new t.CubeGeometry(50, 50, 50);
    
var uprightersc = Math.floor((Math.random() * 11)); 
    var aiMaterialjjc = new t.MeshBasicMaterial({ map: t.ImageUtils.loadTexture('images/images_bots/greenbot/upright/' + uprightersc + '.gif'),  opacity: 1, transparent: true });
    var ojjkey2c = new t.Mesh(aiGeojjkey2c, aiMaterialjjc);
ojjkey2c.id = "hiworld";
ojj.add(ojjkey2c);
ojj.trunk.push(ojjkey2c);



for( var you = 0; you < ojj.length; you++){
for( var youb = 0; youb < ojj[you].trunk.length; youb++){

window.alert( ojj[you].trunk[youb].id);
}





}

threejs选择网格的不同部分

2 个答案: