JavaScript超初心者が３Dグラフィックスを作れる記事【three.js】

久しぶりにジェネラティブアートをやりたくなったので、three.jsというJavaScriptライブラリを使ってこんなものを作ってみました。

今日は久しぶりにジェネラティブアートやりたくなったのでtree.jsに入門してみた。
これBlenderとか使わずにJavaScriptだけでできちゃうの凄すぎない？？
processingからこっちに乗り換えるかも、、#プログラミング初心者と繋がりたい #プログラミング初心者 #駆け出しエンジニアと繋がりたい pic.twitter.com/AzTKmlG2U3
— こめす｜がんばる医学生 (@komesunchu) December 6, 2020

これ、HTMLで描画されてるんですよ。めちゃくちゃすごくないですか？？
技術の進歩に驚きと感動を覚えました。

しかもこれすっごく簡単なんです。
私はJavaScriptはちょっとかじったくらいの知識しかないのですが、それでも多少カスタマイズできるくらいには簡単です。

これはもしかしたら、プログラミング完全未経験の人でも作れるのでは、、？
ということで、早速この記事を書いてみています。

とりあえず動かすことができる
超初心者でも３Dグラフィックスを作れる

というのを目標にしています。
（コードの解説はしていません。それは次回以降、勉強がてらやってみようと思います。）

具体的には、HTMLファイルの作成方法、CORSエラーの回避方法だけに絞って解説してあります。

プログラミングしたことあるよ、という方は最後のCORSエラーの部分だけ見ていただければ充分かと思います。

参考にした動画
コード全文
ライブラリ：three.jsのダウンロード
画像ファイルの準備
Webブラウザの設定変更：CORSエラーの回避
おわりに

参考にした動画

この動画を参考にしたので、こちらも見てみるとわかりやすいと思います。

ただ、残念なことに、現在このコードは動きません。
動画が投稿された後にthree.jsがアップデートされたのが原因のようです。

けど大丈夫、この記事では現バージョンで動くコードを紹介するので、安心してください。

コード全文

まず、コード全文はこちらです。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
</head>


<body> 
  <script src="three.min.js"></script>
　<script src="OrbitControls.js"></script>
  
  
  <script>
  
  
  let scene, camera, renderer, sphereCamera;


function init() {

    scene = new THREE.Scene();
    
  camera = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,1,5000);
  
  camera.position.set(0,400,1000);
  
  renderer = new THREE.WebGLRenderer({antialias:true});
  
  renderer.setSize(window.innerWidth,window.innerHeight);
  
  document.body.appendChild(renderer.domElement);
  
  let controls = new THREE.OrbitControls(camera, renderer.domElement);
  
  controls.enableZoom = false;
  
   let urls = [
  'posx.jpg', 'negx.jpg',
  'posy.jpg', 'negy.jpg',
  'posz.jpg', 'negz.jpg',
];

let loader = new THREE.CubeTextureLoader();

scene.background = loader.load(urls);

const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );

sphereCamera = new THREE.CubeCamera(1, 1000, cubeRenderTarget);

sphereCamera.position.set(0, 100, 0);

scene.add(sphereCamera);

let sphereMaterial = new THREE.MeshBasicMaterial( {envMap: sphereCamera.renderTarget} );

let sphereGeo =  new THREE.SphereGeometry(400, 50, 50);


let mirrorSphere = new THREE.Mesh(sphereGeo, sphereMaterial);

mirrorSphere.position.set(0, 100, 0);

scene.add(mirrorSphere);

  render();
    function render() {
 renderer.render(scene,camera)
  sphereCamera.updateCubeMap( renderer, scene );
  requestAnimationFrame(render);
}
  }
  
  init();

   </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

let scene, camera, renderer, sphereCamera;

function init() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,1,5000);

camera.position.set(0,400,1000);

renderer = new THREE.WebGLRenderer({antialias:true});

renderer.setSize(window.innerWidth,window.innerHeight);

document.body.appendChild(renderer.domElement);

let controls = new THREE.OrbitControls(camera, renderer.domElement);

controls.enableZoom = false;

let urls = [

'posx.jpg', 'negx.jpg',

'posy.jpg', 'negy.jpg',

'posz.jpg', 'negz.jpg',

];

let loader = new THREE.CubeTextureLoader();

scene.background = loader.load(urls);

const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );

sphereCamera = new THREE.CubeCamera(1, 1000, cubeRenderTarget);

sphereCamera.position.set(0, 100, 0);

scene.add(sphereCamera);

let sphereMaterial = new THREE.MeshBasicMaterial( {envMap: sphereCamera.renderTarget} );

let sphereGeo = new THREE.SphereGeometry(400, 50, 50);

let mirrorSphere = new THREE.Mesh(sphereGeo, sphereMaterial);

mirrorSphere.position.set(0, 100, 0);

scene.add(mirrorSphere);

render();

function render() {

renderer.render(scene,camera)

sphereCamera.updateCubeMap( renderer, scene );

requestAnimationFrame(render);

}

init();

</script>

</body>

</html>

テキストエディタを開いて、このコードをすべてコピペしてください。
このコードが今回のプログラムの本体となります。

コピペできたら、新しいフォルダを作ったうえで、そこにindex.htmlという名前をつけて保存してください。
フォルダ自体の名前も、作る場所も適当で大丈夫です。

これから作るファイルは全て、今作ったフォルダに入れます。

同じフォルダに入れておかないと動かないので注意してください。

また、今作ったファイルは、名前の末尾が「.html」となっていないといけません。

この末尾の「.~」というのは拡張子と言って、ファイルの形式を指定しています。
「.html」とすることで、このファイルはHTMLファイルですよ、ということをコンピュータに教えているわけです。

もしindex.html.txtのようになってしまっていたら、ファイルマネージャから名前を変更して、末尾が.htmlになるように変更してください。

その場合、「HTMLファイルに変更しますか？」みたいなこと聞かれるかもしれませんが、OKを押してしまって構いません。

最終的なフォルダ構成はこんな感じになります。以下ではこの完成形を目指してファイルを作っていきます。

ライブラリ：three.jsのダウンロード

この赤丸で囲ったファイルを準備していきます。

この完成形のうち、赤丸で囲ったthree.jsとOrbitControl.jsというファイルを探します。

用意したindex.htmlというプログラムが動くためには、さらにいくつかライブラリという道具箱が必要になります。

three.jsこそがそのライブラリなんです。

そこでthree.jsをダウンロードします。

私はこのサイトを参考にしました。わかりやすいので、私の説明で不十分なところはこちらを参照してみてください。

公式サイトに飛んで、左メニューからdownloadを選択します。
（公式サイト←クリックすると公式サイトに飛びます。）

するとthree.js-master.zipというフォルダのダウンロードが始まるので、完了したらそれを展開します。

このフォルダの中から、全部で２つのファイルを、冒頭で作ったフォルダにコピペしていきます。

まずはbuildという名前のフォルダに入っているthree.min.jsというファイルを、先程作ったフォルダにコピペします。これはコアのライブラリとして使うものです。

さらにマウスでの視点変換に使うライブラリも別の方法で用意する必要があります。
OrbitControls.jsという名前のライブラリです。

このライブラリがちょっとややこしいので注意してください。
three.js-masterフォルダで、「OrbitControls.js」と検索すると、ファイルが２つ出てくると思います。
この２つ、同じ名前なのに実はちょっと違っていて、今回使うのはそのうちの一つです。

exampleフォルダの中にある、jsフォルダの中に入っている方を使います。

これも、はじめに作ったフォルダの中にコピペします。

画像ファイルの準備

最後に、以下の６つの画像ファイルを、先程作った作業フォルダに追加します

この画像ファイルは参考動画に従ってこのサイトからいただきました。背景を別のものにしたい場合は、そちらから好きなものを選んでください。

名前は変えないでくださいね。

たまにダウンロードするときに「.jpg」の部分が「.JPG」に変わってたりするのですが、それもアウトです。
「.jpg」に書き直してください。

ここまででプログラムは完成です。
フォルダは最終的にこんな感じになります。

Webブラウザの設定変更：CORSエラーの回避

index.htmlをクリックするとプログラムが実行されるのですが、、
おそらくまだ何も表示されないはずです。

これはプログラム自体にバグがあるわけではなく、どうやらWebブラウザの設定の問題らしいです。
ちゃんと動くようにするには、CORSエラーの回避というのをしないといけません。
このサイトに従って設定してみてください。

Safariを使っていれば簡単ですが、Chromeを使っているとちょっとめんどくさいです、、

OSがUbuntuの方は、Chromeを使っていてもリンク先の方法はとれません。
コマンドラインから以下のコマンドを実行してみてください。

/opt/google/chrome/chrome --disable-web-security --user-data-dir="&#91;some directory here]"

1	/opt/google/chrome/chrome --disable-web-security --user-data-dir="[some directory here]"

こんな感じでクロームが開いたら成功です。

Safariを使っている方は、index.htmlをダブルクリックすればWebブラウザが開き、冒頭の動画のような３Dグラフィックスが表示されます。

以上で終了です。
あとは好きなようにカスタマイズできます。
このサイトなんかがおすすめです。

私はこんな感じにカスタマイズしました。

three.js掴めてきたかも。テクスチャ崩れてるけど汗
それにしてもこれがHTMLで描画できるなんて信じられない、、
HTMLファイル１つとWebブラウザさえあれば動くから、全くのプログラミング初心者でもすぐできちゃう気がする。#プログラミング初心者と繋がりたい #プログラミング初心者 #javascript pic.twitter.com/Axpc6VOBqg
— こめす｜がんばる医学生 (@komesunchu) December 7, 2020

「HTMLファイル一つとWebブラウザさえあれば動く」は流石に盛ってますね、、

これを作りたければ、５８行目の部分をこう変えて、一行足すだけです。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
</head>


<body> 
  <script src="three.min.js"></script>
　<script src="OrbitControls.js"></script>
  
  
  <script>
  
  
  let scene, camera, renderer, sphereCamera;


function init() {

    scene = new THREE.Scene();
    
  camera = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,1,5000);
  
  camera.position.set(0,400,1000);
  
  renderer = new THREE.WebGLRenderer({antialias:true});
  
  renderer.setSize(window.innerWidth,window.innerHeight);
  
  document.body.appendChild(renderer.domElement);
  
  let controls = new THREE.OrbitControls(camera, renderer.domElement);
  
  controls.enableZoom = false;
  
   let urls = [
  'posx.jpg', 'negx.jpg',
  'posy.jpg', 'negy.jpg',
  'posz.jpg', 'negz.jpg',
];

let loader = new THREE.CubeTextureLoader();

scene.background = loader.load(urls);

const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );

sphereCamera = new THREE.CubeCamera(1, 1000, cubeRenderTarget);

sphereCamera.position.set(0, 100, 0);

scene.add(sphereCamera);

let sphereMaterial = new THREE.MeshBasicMaterial( {envMap: sphereCamera.renderTarget} );

//let sphereGeo =  new THREE.SphereGeometry(400, 50, 50);
let sphereGeo =  new THREE.TorusGeometry(300, 150, 25, 100);

let mirrorSphere = new THREE.Mesh(sphereGeo, sphereMaterial);

mirrorSphere.position.set(0, 100, 0);

scene.add(mirrorSphere);

  render();
    function render() {
      mirrorSphere.rotation.y += 0.01;
      mirrorSphere.rotation.x += 0.007;
 renderer.render(scene,camera)
  sphereCamera.updateCubeMap( renderer, scene );
  requestAnimationFrame(render);
}
  }
  
  init();

   </script>
</body>
</html>

sphereCamera.position.set(0, 100, 0);

scene.add(sphereCamera);

let sphereMaterial = new THREE.MeshBasicMaterial( {envMap: sphereCamera.renderTarget} );

//let sphereGeo = new THREE.SphereGeometry(400, 50, 50);

let sphereGeo = new THREE.TorusGeometry(300, 150, 25, 100);

更に回転させたければ、６９行目以降にこのような記述を足してください。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
</head>


<body> 
  <script src="three.min.js"></script>
　<script src="OrbitControls.js"></script>
  
  
  <script>
  
  
  let scene, camera, renderer, sphereCamera;


function init() {

    scene = new THREE.Scene();
    
  camera = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,1,5000);
  
  camera.position.set(0,400,1000);
  
  renderer = new THREE.WebGLRenderer({antialias:true});
  
  renderer.setSize(window.innerWidth,window.innerHeight);
  
  document.body.appendChild(renderer.domElement);
  
  let controls = new THREE.OrbitControls(camera, renderer.domElement);
  
  controls.enableZoom = false;
  
   let urls = [
  'posx.jpg', 'negx.jpg',
  'posy.jpg', 'negy.jpg',
  'posz.jpg', 'negz.jpg',
];

let loader = new THREE.CubeTextureLoader();

scene.background = loader.load(urls);

const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );

sphereCamera = new THREE.CubeCamera(1, 1000, cubeRenderTarget);

sphereCamera.position.set(0, 100, 0);

scene.add(sphereCamera);

let sphereMaterial = new THREE.MeshBasicMaterial( {envMap: sphereCamera.renderTarget} );

let sphereGeo =  new THREE.SphereGeometry(400, 50, 50);


let mirrorSphere = new THREE.Mesh(sphereGeo, sphereMaterial);

mirrorSphere.position.set(0, 100, 0);

scene.add(mirrorSphere);

  render();
    function render() {
      mirrorSphere.rotation.y += 0.01;
      mirrorSphere.rotation.x += 0.007;
 renderer.render(scene,camera)
  sphereCamera.updateCubeMap( renderer, scene );
  requestAnimationFrame(render);
}
  }
  
  init();

   </script>
</body>
</html>

render();

function render() {

mirrorSphere.rotation.y += 0.01;

mirrorSphere.rotation.x += 0.007;

renderer.render(scene,camera)

sphereCamera.updateCubeMap( renderer, scene );

requestAnimationFrame(render);

}

コードに関しては、私の勉強も兼ねて次の記事で解説してみようと思います。
また、もう少し面白いカスタマイズができるようになったらそれも紹介してみます。

おわりに

この記事を書いていて思ったのですが、プログラミングを始める前の障壁がかなりきついですね、、。

私はコーディングそれ自体よりも、環境を整えるのに大変苦労しました。

わかりにくいところも多いと思いますので、もし不具合が起きたらコメントしていただけると助かります。
先程載せたツイートへのリプでもOKです。

私に解決できそうなものなら協力できると思います。

それと今回利用させていただいた背景画像ですが、これを直接私のサイトに貼るのは著作権的にどうなんでしょうか、、
リンク先からのダウンロードは大変手間がかかったので、少しでも手間を減らせるようこの方法を選んだのですが、、

引用元を明記しておいたこと、商用利用でないこと、元サイト様がフリーサイトであること、などから大丈夫かなと判断したのですが、もし私の認識が甘ければご指摘お願いします。

おしまい