0

本质上，我想知道如何降低场景中未在鼠标按下时选择的所有 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>
4

1 回答 1

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 中的透明度很棘手，您可能会遇到很多工件。

三.js r.58

于 2013-05-12T03:06:08.327 回答