Question

基本上，我想知道如何减少场景中未被mousedown选择的所有3D对象的不透明度？也就是说，如果我选择一个对象（该对象的不透明度为1）而另一个对象的不透明度减少固定数量。让我们说，所有其他对象现在都是不透明的.25？例如，当选择其中一个立方体时，如何在此示例中减少立方体的不透明度？ 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>

Answer 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

如何降低mousedown未选择的3D对象的不透明度？

1 个答案: