如何降低鼠标按下时未选择的 3D 对象的不透明度？答案

【问题标题】：How do I reduce the opacity of the 3D objects that are not selected upon mousedown?如何降低鼠标按下时未选择的 3D 对象的不透明度？
【发布时间】：2013-05-06 08:56:00
【问题描述】：

本质上，我想知道如何降低场景中未在鼠标按下时选择的所有 3D 对象的不透明度？也就是说，如果我选择一个对象（该对象的不透明度为 1），而另一个对象的不透明度减少一个固定数字。假设，所有其他对象现在的不透明度都为 0.25？ For example, how would I reduce the opacity of the cubes in this example when one of the cubes are selected? http://threejs.org/examples/canvas_interactive_cubes.html

下面是我将如何使用图像和 JQuery 来实现它，我已经看到了很多关于如何在图像上实现它的示例，但我还没有找到任何使用 3D 对象的示例。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a{
text-decoration: none;
}
</style> 
<title>Title of the document</title>
</head>

<body>

<div id="images">
<a class="images" href="#">
    <img class="click" src="http://dummyimage.com/50x50/000/fff.png&text=1" />
    <br/><br/>
</a>
<a class="images" href="#">
    <img class="click" src="http://dummyimage.com/50x50/000/fff.png&text=2"/>
    <br/><br/>
</a>
<a class="images" href="#">
    <img class="click" src="http://dummyimage.com/50x50/000/fff.png&text=3"/>
    <br/><br/>
</a>
</div>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script> 
$('a.images').click(function() {
// Make all images (except this) transparent
$('a.images').not(this).stop().animate({
    opacity: 0.4
}, 300);
// Make this opaque
$(this).stop().animate({
    opacity: 1.0
}, 300);
});
</script> 
</body>
</html>

【问题讨论】：

创建对象时设置不透明度，如：var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: '#ffffff', opacity: 0.5 } ) );
查看您链接到的页面的来源。它比图像复杂得多，因为在 3D 场景中，您需要一个 rayCaster 来计算出当时哪个立方体在鼠标指针“下方”。然后你可以设置其他的不透明度。此外，jQuery 选择器不适用于 three.js 网格，因为它们不是页面元素。

标签： javascript jquery 3d three.js webgl

【解决方案1】：

在您引用的交互式多维数据集示例中，添加以下内容：

if ( intersects.length > 0 ) {

    for ( i = 0; i < objects.length; i++ ) {    
        objects[ i ].material.opacity = 0.25;
    }

    intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
    intersects[ 0 ].object.material.opacity = 1;

}

如果您使用的是 webGL，请务必为您的透明对象设置 transparent = true。但请记住，WebGL 中的透明度很棘手，您可能会遇到很多伪影。

three.js r.58

【讨论】：

哇，非常感谢@WestLangley！顺便说一句，如果我想保留立方体的原始颜色，我只需添加 Iintersects[ 0 ].object.material.color.setHex( intersects.currentHex );但有趣的是，显示的颜色是纯黑色，而其他立方体是灰色阴影（未选择立方体）。我的问题在哪里？如何修复它以保持正确的颜色？
如果您需要更多帮助，请发一个新帖子，并尽可能链接到一个实时示例 (jsfiddle.net)。但首先，尽你最大的努力自己弄清楚。我打赌你可以，事实上。 :-)
我可能可以。谢谢@WestLangley！