Forked from: edo_m18's Three.jsで影を表示 View Diff (198)

Fork
9
Fav
10
View
8784
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 355 lines
  • HTML 43 lines
  • SCSS / Compass 12 lines

Three.jsでトゥーンシェーダの実装の実験をしていきます。

実装については以下の記事を参考にさせてもらいました。
トゥーンレンダリング | wgld.org

更新履歴

  • 2013.08.06 - シェーダ切り替えスイッチを追加。

現状の問題点

なぜかカリングの設定がうまく動いていない・・。なにか勘違いしているのだろうか・・。 なにか知っている人いたら教えて下さい。 ↓どうもこれが想定通りに動いていない。 `renderer.setFaceCulling(THREE.CullFaceFront);`

レンダリングについてはMaterial側で設定するのが正解でした↓

material.side = THREE.BackSide;//or THREE.FrontSize or THREE.DoubleSide

これで意図通りにレンダリングされました。

今回のハマったポイントなどはqiitaに解説記事を投稿しているので、興味ある人は見てみてください。

  • Three.jsでトゥーンシェーダの実装の実験
  • Three.jsでトゥーンシェーダの実装の実験

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

edo_m18

Author

CSS-EBLOGの管理人やってます。

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by