Fatal编程技术网
  • javascript/
  • Javascript 如何降低鼠标向下时未选择的三维对象的不透明度？

Javascript 如何降低鼠标向下时未选择的三维对象的不透明度？

javascript jquery 3d three.js webgl

Javascript 如何降低鼠标向下时未选择的三维对象的不透明度？,javascript,jquery,3d,three.js,webgl,Javascript,Jquery,3d,Three.js,Webgl,本质上，我想知道如何降低场景中所有未在鼠标向下移动时选择的3D对象的不透明度？也就是说，如果我选择一个对象（该对象的不透明度为1），而另一个对象的不透明度减少了一个固定的数字。比方说，所有其他对象现在都处于不透明度。25？例如，在本例中，当选择一个立方体时，如何降低立方体的不透明度 下面是我如何使用images和JQuery实现的，我已经看过很多关于如何在图像上实现的示例，但我还没有找到任何使用3D对象的示例 <!DOCTYPE html> <html> <head

本质上，我想知道如何降低场景中所有未在鼠标向下移动时选择的3D对象的不透明度？也就是说，如果我选择一个对象（该对象的不透明度为1），而另一个对象的不透明度减少了一个固定的数字。比方说，所有其他对象现在都处于不透明度。25？例如，在本例中，当选择一个立方体时，如何降低立方体的不透明度

下面是我如何使用images和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> 


a{
文字装饰：无；
}
文件标题
$（'a.images'）。单击（函数（）{
//使所有图像（除此之外）透明
$（'a.images'）。不是（这个）。停止（）。设置动画({
不透明度：0.4
}, 300);
//让这个不透明
$（this）.stop（）.animate({
不透明度：1.0
}, 300);
});
在您引用的交互式多维数据集示例中，添加以下内容：

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;

}

if（intersects.length>0）{
对于（i=0；i
如果您正在使用webGL，请确保为透明对象设置
transparent=true
。但是请记住，在WebGL中透明度是很棘手的，您可能会有很多工件

three.js r.58

在创建对象时设置不透明度，例如：
var object=new three.Mesh（几何体，new three.MeshBasicMaterial（{color:'#ffffffff'，不透明度：0.5}）查找链接到的页面的源代码。它比图像要复杂得多，因为在3D场景中，你需要一个光线投射器来计算出此时哪个立方体在鼠标指针的“下方”。然后你可以设置其他的不透明度。另外，jQuery选择器不能在three.js网格上工作，因为它们不是页面元素。哇，非常感谢@WestLangley！顺便说一句，如果我想保留立方体的原始颜色，我只需要添加Iintersects[0].object.material.color.setHex（intersects.currentHex）；但有趣的是，显示的颜色是纯黑色，其他立方体是灰色（立方体未选中）。我的错在哪里？我如何修复它以使其保持正确的颜色？如果需要更多帮助，请发表新文章，并尽可能链接到一个实例（jsfiddle.net）。但首先，尽你最大的努力自己解决它。事实上，我打赌你可以。：-）我可能可以。谢谢@WestLangley！