threejs 选择网格的不同部分答案

【问题标题】：threejs selecting different parts of a meshthreejs 选择网格的不同部分
【发布时间】：2015-01-17 15:44:12
【问题描述】：

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

【问题讨论】：

标签： three.js webgl shader mesh

【解决方案1】：

您可以为每个三角形创建附加属性，即它所属的身体部位的颜色。所以，左腿的所有三角形都是红色的，右腿的所有三角形都是蓝色的等等。

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

这种通过为 3d 对象分配不同的颜色、将这些颜色渲染到另一个纹理然后检查单击像素的颜色来挑选 3d 对象的技术非常普遍，尽管它有一些缺陷。另一方面，光线测试也不是绝对准确的。

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

【讨论】：

哦，这真是一个很酷的主意。我看到另一个example，不完全相关，但他使用的是由实际模型渲染的鬼场景。我试图使用这种方法，其中光线投射检查所有部分都分开的幽灵场景。然后根据选择哪一种，实际模型上的相应材料将被更新。

【解决方案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);
}





}

【讨论】：