[threejs] CanvasTextureでグラデーションテクスチャを貼る(2)
(1)の応用です。テクスチャとして使用したcanvasのグラデーションを更新します。ソースを見ると分かりますがグラデーションの色の更新はthreejsとは特に関係ありません。 [crayon-641d6986d59324 […]
(1)の応用です。テクスチャとして使用したcanvasのグラデーションを更新します。ソースを見ると分かりますがグラデーションの色の更新はthreejsとは特に関係ありません。 [crayon-641d6986d59324 […]
three.js(r79)でCanvasをテクスチャとして利用する方法です。 まずはthreejs関係なくjsでグラデーションを描画します。
1 2 3 4 5 6 7 8 9 10 11 |
canvas = document.createElement('canvas') canvas.width = 100 canvas.height = 100 context = canvas.getContext('2d') context.beginPath() grad = context.createLinearGradient(0,0,0,100) grad.addColorStop(0,'rgba(255,255,255,0)') grad.addColorStop(1,'rgba(255,255,255,1)') context.fillStyle = grad context.rect(0,0,100,100) context.fill() |
Canvas […]
three.js(r79)で扇形を描画する方法。 CircleGeometryの第3、4引数を利用します。 第3引数に開始角度、第4引数に終了角度を代入します。(共にラジアン角) DEMO 以下デモのソース(Coffee […]