【Three.js】シンプルなサンプルコードをローカルで動かしてみる

頻馬主義

2021年7月24日 02:44

数年前にThree.jsの存在を知りました。面白そうだなと感じて触ってみたのですが、あまりものにならずそのまま放置していました。

最近また勉強してみようかなーと思い始め、少しずつ触っています。

ローカルで動かしてみる

シンプルなものであればローカルでも動作させることができます。
今回はこちらのサンプルコードを動かすところからやってみたいと思います。

適当な場所に hoge フォルダを作成し、その中に fuga_1.html を作成します。

fuga_1.html の中身

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"/>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
   <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);

       function init() {

           // サイズを指定
           const width = 960;
           const height = 540;

           // レンダラーを作成
           const renderer = new THREE.WebGLRenderer({
               canvas: document.querySelector('#myCanvas')
           });
           renderer.setPixelRatio(window.devicePixelRatio);
           renderer.setSize(width, height);

           // シーンを作成
           const scene = new THREE.Scene();

           // カメラを作成
           const camera = new THREE.PerspectiveCamera(45, width / height);
           camera.position.set(0, 0, +1000);

           // 箱を作成
           const geometry = new THREE.BoxGeometry(400, 400, 400);
           const material = new THREE.MeshNormalMaterial();
           const box = new THREE.Mesh(geometry, material);
           scene.add(box);

           tick();

           // 毎フレーム時に実行されるループイベントです
           function tick() {
               box.rotation.y += 0.01;
               renderer.render(scene, camera); // レンダリング

               requestAnimationFrame(tick);
           }
       }
   </script>
</head>
<body>
   <canvas id="myCanvas"></canvas>
</body>
</html>

three.js のバージョンを r128 にしたのと、インデントを少し弄ったくらいで他は元のサンプルコードそのままです。

動作確認

できあがったら fuga_1.html を Chrome あたりのブラウザで開いてみましょう。

黒い背景に立方体が横向きに回転しているのが表示されればOKです。

Three.js に関する部分を別ファイルに切り出す

複雑なものを作ろうとすると script タグの中身がどんどん長くなっていきます。そうすると html ファイル自体が大きくなって管理しづらくなるので、Three.js に関する部分を別ファイルに切り出してみましょう。

hoge フォルダの中に fuga_2.html と piyo.js を作成します。

fuga_2.html の中身

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"/>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
   <script src="piyo.js"></script>
</head>
<body>
   <canvas id="myCanvas"></canvas>
</body>
</html>

script タグの中身を削除して、代わりに piyo.js を指定しています。
だいぶスッキリしましたね。

piyo.js の中身

// ページの読み込みを待つ
window.addEventListener('load', init);

function init() {

   // サイズを指定
   const width = 960;
   const height = 540;

   // レンダラーを作成
   const renderer = new THREE.WebGLRenderer({
       canvas: document.querySelector('#myCanvas')
   });
   renderer.setPixelRatio(window.devicePixelRatio);
   renderer.setSize(width, height);

   // シーンを作成
   const scene = new THREE.Scene();

   // カメラを作成
   const camera = new THREE.PerspectiveCamera(45, width / height);
   camera.position.set(0, 0, +1000);

   // 箱を作成
   const geometry = new THREE.BoxGeometry(400, 400, 400);
   const material = new THREE.MeshNormalMaterial();
   const box = new THREE.Mesh(geometry, material);
   scene.add(box);

   tick();

   // 毎フレーム時に実行されるループイベントです
   function tick() {
       box.rotation.y += 0.01;
       renderer.render(scene, camera); // レンダリング

       requestAnimationFrame(tick);
   }
}

script タグの中身そのままですね。

動作確認

fuga_2.html をブラウザで開いてみましょう。

同じように回転する立方体が表示されればOKです。

この記事が気に入ったらサポートをしてみませんか？