Three.jsでScene背景にグラデーションを設定したい

Three.jsでアプリ開発とかしてます。

その時、こんな問題にぶつかりました。

Sceneの背景色は単色だったら簡単
でもグラデーションさせるには・・・?

ググっても中々出てこなくて困ります。

ただやっとその方法を見つけたので、
Scene背景色をグラデーションさせる方法を紹介。

このページの目次

単色は WebGLRenderersetClearColor で設定できるが...
Scene背景をグラデーションさせる手順
- １．まず WebGLRenderer でalpha有効にする
- ２．canvas要素をCSSでグラデーションさせる
グラデーションの具体的コードと表示例

単色は WebGLRenderersetClearColor で設定できるが...

Scene背景色に単色を設定する場合。

次のメソッドで簡単に設定できます。

▼ WebGLRenderer.setClearColor について

.setClearColor ( color : Color, alpha : Float ) : null
Sets the clear color and opacity.

引用元　：　https://threejs.org/docs/#api/en/renderers/WebGLRenderer

▼ 背景を黒色にするコード例

var w = window.innerWidth; 
var h = window.innerHeight;

var scene = new THREE.Scene();

var renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#appCanvas')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(w, h);
/// ▼ これ
renderer.setClearColor(0x000000, 1);

/// その他初期化は省略...

var w = window.innerWidth;

var h = window.innerHeight;

var scene = new THREE.Scene();

var renderer = new THREE.WebGLRenderer({

canvas: document.querySelector('#appCanvas')

});

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(w, h);

/// ▼ これ

renderer.setClearColor(0x000000, 1);

/// その他初期化は省略...

上コードのように単純に renderer.setClearColor(0x000000, 1); を呼び出すだけ。ちなみ第２引数にはアルファ（すなわち透過色）なんかも渡せます。

ただグラデーションは不可能。

そうするには少し工夫が必要です。

Scene背景をグラデーションさせる手順

その手順はこういう感じ

１．まず WebGLRenderer でalpha有効にする

まずはレンダラ―で透過色を有効に

▼ たとえばこのような初期化コード

var renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#appCanvas'),
  alpha: true  /// ＜＝ これ
});

var renderer = new THREE.WebGLRenderer({

canvas: document.querySelector('#appCanvas'),

alpha: true /// ＜＝これ

});

このように alpha: true とすればOK

その他の設定は構う必要なしです。

２．canvas要素をCSSでグラデーションさせる

次にcanvas要素自体をグラデーションさせます。

グラデーションさせるCSSは次の通り

▼ 白から灰色にグラデさせるCSS例

html, body{
  margin: 0;
  padding: 0;
}
canvas{
  background-image: 
    radial-gradient(#ffffff, #888888);
}

html, body{

margin: 0;

padding: 0;

}

canvas{

background-image:

radial-gradient(#ffffff, #888888);

}

上コードのように background-image: radial-gradient(#ffffff, #888888); とすれば放射状に #ffffff から #888888 にグラデーションします。

ちなみに線形なグラデーションをさせたいなら linear-gradient を使えばOK。たとえば linear-gradient(#fff, #888); とすれば左から右にグラデーションします。（参考記事　：　https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient）

グラデーションの具体的コードと表示例

実際に書いてみたコードがコチラ

▼ Sceneにグラデーション背景を設定させる

window.addEventListener('DOMContentLoaded', function(){
  var w = window.innerWidth; 
  var h = window.innerHeight;

  var scene = new THREE.Scene();

  var renderer = new  THREE.WebGLRenderer({
   canvas: document.querySelector('#appCanvas'),
    alpha: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(w, h);

  var camera = new THREE.PerspectiveCamera(45, w/h, 1, 10000);
  camera.position.set(2, 2, 2);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  
  var directLight = new THREE.DirectionalLight(0x888888, 1);
  var ambLight   = new THREE.AmbientLight(0xffffff, 0.65);
  directLight.position.set(1, 1, 1).normalize();
  scene.add(camera);
  camera.add(directLight);
  camera.add(ambLight);
  
  var geometry = new THREE.BoxBufferGeometry(1, 1, 1);
  var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
  var cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  renderer.render(scene, camera);
  
  window.addEventListener('resize', function(){
    const width = window.innerWidth;
    const height = window.innerHeight;

    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);

    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  });
  
  function stepFrame(){
    requestAnimationFrame(stepFrame);
    renderer.render(scene, camera);
    
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    cube.rotation.z += 0.01
  }
  
  stepFrame();
});

window.addEventListener('DOMContentLoaded', function(){

var w = window.innerWidth;

var h = window.innerHeight;

var scene = new THREE.Scene();

var renderer = new THREE.WebGLRenderer({

canvas: document.querySelector('#appCanvas'),

alpha: true

});

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(w, h);

var camera = new THREE.PerspectiveCamera(45, w/h, 1, 10000);

camera.position.set(2, 2, 2);

camera.lookAt(new THREE.Vector3(0, 0, 0));

var directLight = new THREE.DirectionalLight(0x888888, 1);

var ambLight = new THREE.AmbientLight(0xffffff, 0.65);

directLight.position.set(1, 1, 1).normalize();

scene.add(camera);

camera.add(directLight);

camera.add(ambLight);

var geometry = new THREE.BoxBufferGeometry(1, 1, 1);

var material = new THREE.MeshBasicMaterial({color: 0x00ff00});

var cube = new THREE.Mesh(geometry, material);

scene.add(cube);

renderer.render(scene, camera);

window.addEventListener('resize', function(){

const width = window.innerWidth;

const height = window.innerHeight;

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(width, height);

camera.aspect = width / height;

camera.updateProjectionMatrix();

});

function stepFrame(){

requestAnimationFrame(stepFrame);

renderer.render(scene, camera);

cube.rotation.x += 0.01

cube.rotation.y += 0.01

cube.rotation.z += 0.01

}

stepFrame();

});

▼ 実際の動作は次のCodePen参照

See the Pen
【Three.js】Scene背景色にグラデーションを設定 by ぴー助 (@pisuke-code)
on CodePen.

以上、Three.jsで背景グラデさせる方法でした。

もし問題点などあればコメントから指摘ください。

Three.jsでScene背景にグラデーションを設定したい

単色は WebGLRenderersetClearColor で設定できるが...

Scene背景をグラデーションさせる手順

１．まず WebGLRenderer でalpha有効にする

２．canvas要素をCSSでグラデーションさせる

グラデーションの具体的コードと表示例

関連記事

プロフィール

人気記事

検索してみる