3DコンテンツをWEBサイトの背景に使う ～Webサイトで3Dコンテンツ(Three.js)デザイン

Three.jsの3DコンテンツをWEBサイトの背景に使う(Three.js[r145]を使用)

WebGLRendererを作成するときに、alpha:true を設定すると、キャンバスの背景が透明になります。

renderer = new THREE.WebGLRenderer({
  canvas:can,
  antialias:true,            //アンチエイリアスをtureにする
  alpha: true,               //透明にする
  premultipliedAlpha: false, //プリマルチプライドアルファを使用しない
});

3Dコンテンツを表示させるCanvasのCSSに以下のように入れると背景になります。

  position:fixed;
  left:0;
  top:0px;
  z-index: -1;