Notionのドキュメントに3Dモデルを埋め込む

本日は普段と少しテーマを変えていきます。

　筆者は現在地元の大学で３DCGに関して指導していますが、講義外でも学生さんがアクセスして勉強できるようにNotionを使用してドキュメントをまとめています。

　本ブログに関しても毎日更新しているので実質毎日数記事分のドキュメントを書いているということになります。

　学生さんにとってわかりやすいようにという趣旨で、本ブログよりもより初学者向けに書いていますが、実際のところ学生さんの役に立てているのかという点で疑問が残ります。

　そもそも筆者一人が時間の合間に3DCGに関して記述しているため圧倒的にドキュメント数が不足しているという点も大きいですが、その中でもできるだけ学生さんにとってわかりやすい内容を心掛けている中で今回Notionのドキュメントの中に実際に3DCGを埋め込めないか挑戦しましたので備忘録として残します

〇環境

・Notion

・Glitch

〇Webページに3Dモデルを埋め込む

　Webページに3DCGを埋め込むためには一般的にThree.jsやBabylon.jsなどのライブラリを使用します。

　しかしながらNotionのサービスを使用する場合はできることが限られています。

　NotionではNotionAPIと呼ばれる外部サービスとの連携を行うAPIがあり、様々なことができますが、APIである通り結局外部で3DCGを読み込むサービスを使用する必要があります。

　そこで今回はNotionの機能である、外部ページの埋め込み機能を使用します。

　埋め込み機能とは、その名の通りNotionページ内に他のページをオーバーライドする機能です。

　これを使用することでNotionページで他サイトを載せることができ、単に3DCGを読み込めるWebページを作成し、埋め込めばよいということになります。

　今回はGlitchを使用してWebページを作っていきます。

〇Glitch側でのBabylon.jsを使用した3D表示

　今回は3DCGをレンダリングするエンジンとしてBabylon.jsを使用します。

　また無料でWebページを製作できるツールとしてGlitchを使用しています。

Index.htmlを以下のように書き換えます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 
      This is an HTML comment
      You can write text in a comment and the content won't be visible in the page
    -->

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://glitch.com/favicon.ico" />

    <!--
      This is the page head - it contains info the browser uses
      Like the title, which appears on the browser tab but not inside the page
      Further down you'll see the content that displays in the page
    -->
    <title>Hello World!</title>

    <!-- The website stylesheet -->
    <link rel="stylesheet" href="/style.css" />

    <!-- The website JavaScript file -->
    <script src="/script.js" defer></script>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
  </head>
  <body>
    <!--
      The body includes the content you see in the page
      Each element is defined using tags, like this <div></div>
      The attributes like class="wrapper" let us style elements in the CSS
    -->
    <canvas id="renderCanvas" touch-action="none" style="width: 100%; height: 500px;"></canvas>
    <div class="wrapper">
      <div class="content" role="main">
        <h1 class="title">Hello World!</h1>
        
      </div>
    </div>
    <!-- The footer holds our remix button — you can keep or delete it ✂ -->


    <!-- Babylon.js script to display 3D model -->
    <script>
      window.addEventListener('DOMContentLoaded', function() {
        // Babylon.jsのエンジンとシーンを作成
        var canvas = document.getElementById('renderCanvas');
        var engine = new BABYLON.Engine(canvas, true);
        var scene = new BABYLON.Scene(engine);

        // カメラを作成
        var camera = new BABYLON.ArcRotateCamera('camera', Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);

        // ライトを作成
        var light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);

        // 3Dモデルをロード
        BABYLON.SceneLoader.ImportMesh('', 'https://models.babylonjs.com/', 'skull.babylon', scene, function(newMeshes) {
          // モデルがロードされた後の処理
          newMeshes[0].position = new BABYLON.Vector3(0, 0, 0);
        });

        // レンダリングループ
        engine.runRenderLoop(function() {
          scene.render();
        });

        // ウィンドウのリサイズ対応
        window.addEventListener('resize', function() {
          engine.resize();
        });
      });
    </script>
  </body>
</html>

　ここではサンプルとして骸骨の３Dモデルをロードしています。