时间戳

首页 > 解决方案 > three.js 中的真实组透明性

javascript - three.js 中的真实组透明性

问题描述

像这个问题一样，我想改变一个组的不透明度。但是该问题中公认的答案并不完全正确。更改组的不透明度不等于更改其部分的不透明度。我可以用这个小 svg 示例来展示这一点：

组不透明度（良好）：

<svg width="200" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g opacity="0.5">
        <g>
            <rect x="20" y="30" width="10" height="50" fill="brown"/>
            <g style="fill: #0b0">
                <circle cx="20" cy="30" r="10"/>
                <circle cx="30" cy="30" r="10"/>
                <circle cx="25" cy="20" r="10"/>
            </g>
        </g>
    </g>
</svg>

个别不透明度（坏）：

<svg width="200" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g>
        <g>
            <rect x="20" y="30" width="10" height="50" fill="brown" opacity="0.5"/>
            <g style="fill: #0b0">
                <circle cx="20" cy="30" r="10" opacity="0.5"/>
                <circle cx="30" cy="30" r="10" opacity="0.5"/>
                <circle cx="25" cy="20" r="10" opacity="0.5"/>
            </g>
        </g>
    </g>
</svg>

如何在 中做这样的事情three.js？

标签： javascriptsvgthree.js

解决方案

推荐阅读