Three.jsで読み込んだJSONモデルの一部分だけを透明にしたい

Question

クリックをトリガーにして、Three.jsで読み込んだJSONモデルの上半分だけを透明にしたい場合はどうすればよいでしょうか？

Cubeをかぶせてその内部にあるオブジェクトをすべて透明にできるマテリアルがあるのか、
fogのようなもので透明にできるのか、いろいろ検討したものの見つかりません。

JSONはBlenderで出力しているので、出力時にJSONを2つに分けておくというのがパッと思いついた方法ではあるのですが、これ以外の方法が思い当たる方がいらっしゃったらご教授いただきたいです。よろしくお願いします。

Answer 1

上半分、というのが具体的にどういう状況をさしているのかわからないのですが、
おそらくそれをひとつのモデルで実現しようとするとシェーダに手を入れないとむずかしいのではないかな、と思います。
（逆にシェーダをいじれるなら、モデルのローカルのY座標を元にしきい値以上上を半透明とする、というのは結構簡単にできるかもしれません。モデルの質感とかにもよりますが・・）

ただご自身でおっしゃられているように、そもそもモデルをふたつに分けておいて、
上半分だけを半透明にしてあげれば目的は達成できると思います。

Comments

[grmn]

以下のコードで解決できました。ありがとうございました！

```
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
varying vec2 vUv;
void main() {
vec2 position = vUv;
float alpha = position.y > 0.5 ? 0.0 : 1.0;
gl_FragColor = vec4( 1.0, 0.0, 0.0, alpha);
}
</script>
```