[threejs] CanvasTextureでグラデーションテクスチャを貼る(2)
(1)の応用です。
テクスチャとして使用したcanvasのグラデーションを更新します。
ソースを見ると分かりますがグラデーションの色の更新はthreejsとは特に関係ありません。
|
1 |
texture.needsUpdate = true |
一点気をつけなければいけないのはcontextを描画しなおした時にtextureのneedsUpdateプロパティに都度trueを代入しなくてはいけません。
以下デモのソース（CoffeeScript）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
class Main constructor: -> # param @tweenTime = 1 # stats @stats = new Stats() document.body.appendChild(@stats.dom) # scene @scene = new THREE.Scene() # camera @camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) @camera.position.z = 100 @camera.lookAt(x:0,y:0,z:0) # renderer @renderer = new THREE.WebGLRenderer(alpha:true,antialias:true) @renderer.setClearColor(0x000000) if window.devicePixelRatio @renderer.setPixelRatio(window.devicePixelRatio) document.body.appendChild(@renderer.domElement) # controls @controls = new THREE.OrbitControls(@camera,@renderer.domElement) # container @container = new THREE.Group() @scene.add(@container) @color1 = r:0,g:0,b:0,a:0 @color2 = r:0,g:0,b:0,a:0 # canvas = document.createElement('canvas') canvas.width = 100 canvas.height = 100 @context = canvas.getContext('2d') @geometry = new THREE.PlaneGeometry(70,70,8,8) @texture = new THREE.CanvasTexture(canvas) @texture.minFilter = THREE.LinearFilter @texture.magFilter = THREE.LinearFilter material = new THREE.MeshBasicMaterial(side:THREE.DoubleSide,map:@texture,transparent:true,overdraw:true) @plane = new THREE.Mesh(@geometry,material) @container.add(@plane) wireMaterial = new THREE.MeshBasicMaterial(color:0xffffff,wireframe:true) @wirePlane = new THREE.Mesh(@geometry,wireMaterial) @container.add(@wirePlane) # dat.gui @conf = displayWireframe: true @gui = new dat.GUI() @folder = @gui.addFolder('diaplay wireframe') @folder.add(@conf,'displayWireframe').onChange(@changeWireframe) @changeGradient() @render() @resize() $(window).resize(@resize) changeWireframe: => @wirePlane.visible = @conf.displayWireframe return generateRandomRGBA: => rgba = r: Math.round(Math.random() * 255) g: Math.round(Math.random() * 255) b: Math.round(Math.random() * 255) a: Math.random() return rgba drawGradient: => @context.clearRect(0,0,100,100) @context.beginPath() grad = @context.createLinearGradient(0,0,0,100) grad.addColorStop(0,'rgba(' + @color1.r + ',' + @color1.g + ',' + @color1.b + ',' + @color1.a + ')') grad.addColorStop(1,'rgba(' + @color2.r + ',' + @color2.g + ',' + @color2.b + ',' + @color2.a + ')') @context.fillStyle = grad @context.rect(0,0,100,100) @context.fill() @texture.needsUpdate = true return changeGradient: => color1 = @generateRandomRGBA() color2 = @generateRandomRGBA() tl = new TimelineMax( onComplete: @changeGradient onUpdate: @drawGradient ) tl.to(@color1,@tweenTime, r: color1.r g: color1.g b: color1.b a: color1.a roundProps: 'r,g,b' ease: Linear.easeNone ) tl.to(@color2,@tweenTime, r: color2.r g: color2.g b: color2.b a: color2.a roundProps: 'r,g,b' ease: Linear.easeNone 0) return resize: => @camera.aspect = window.innerWidth / window.innerHeight @camera.updateProjectionMatrix() @renderer.setSize(window.innerWidth, window.innerHeight) return render: => @stats.begin() @renderer.render(@scene,@camera) @controls.update() @stats.end() requestAnimationFrame(@render) return $ -> new Main() return |
