[threejs] CanvasTextureでグラデーションテクスチャを貼る(1)
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() |
CanvasTextureのコンストラクタに上記canvasを代入します。
|
1 |
texture = new THREE.CanvasTexture(canvas) |
最後に画像テクスチャの設定と同じようにマテリアルのコンストラクタのmapパラメータに上記textureインスタンスを設定します。
|
1 |
material = new THREE.MeshBasicMaterial(side:THREE.DoubleSide,map:texture,transparent:true,overdraw:true) |
|
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 |
class Main constructor: -> # 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) # 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() @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) @render() @resize() $(window).resize(@resize) changeWireframe: => @wirePlane.visible = @conf.displayWireframe 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 |
