みなさま、ご無沙汰しております。

ほぼ1年ぶりの更新になってしまいました。。。
書こう書こうと思っていたんですが、日々の忙しさに追われ気づけば1年経っておりました。
僕は生きております！！

さて、今回3Dイメージを使用したウェブサイト制作の依頼があり、three.jsを使用し自分がつまずいた点をまとめましたので、同じく悩んでいる方のお力になれればと思っています！

three.jsの読み込み

今回は、.daeファイルを読み込んで制作しましたので、.daeファイルを元に進めていきます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/ColladaLoader.js"></script>

まず上記CDNとファイルを読み込みます。

上記ファイルは、公式サイトのdownloadより、ダウンロードしてください。

ダウンロードしたら解凍し、「examples」→「js」→「loaders」→「OrbitControls.js」と「ColladaLoader.js」をサーバーにアップして下さい。

3Dデータの読み込み

<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();
      scene.background = new THREE.Color( 0x404040 );

    // カメラを作成
    const camera = new THREE.PerspectiveCamera(
      45,
      width / height,
      0.1,
      10000
    );
    // カメラの初期座標を設定
    camera.position.set(60, 0, 100);

    // カメラコントローラーを作成
    const controls = new THREE.OrbitControls(camera);
    controls.target.set(0, -5, 0);
    controls.update();

    // 平行光源を作成
    const directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);
    // 環境光を追加
    const ambientLight = new THREE.AmbientLight(0x333333);
    scene.add(ambientLight);

    // 3DS形式のモデルデータを読み込む
    const loader = new THREE.ColladaLoader();
    // 3dsファイルのパスを指定
    loader.load('ファイルまでのパス', collada => {
      // 読み込み後に3D空間に追加
      const model = collada.scene;
      scene.add(model);
    });

    tick();

    // 毎フレーム時に実行されるループイベントです
    function tick() {
      // レンダリング
      renderer.render(scene, camera);
      requestAnimationFrame(tick);
    }
  }
</script>

47行目の「ファイルまでのパス」を.daeデータまでのパスに変更してください。

背景色の変更方法

19行目にある

scene.background = new THREE.Color( 0x404040 );

404040　部分を任意の色に変更する。

canvas外のスクロール制御

32行目にある

const controls = new THREE.OrbitControls(camera);

の部分を

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

に変更する。

まとめ

なかなか使う機会がないと思いますが、忘れないようにメモとして見ていただければと思います。