3Dのメモ帳みんなでジオラマ作る！～街編～に参加しました！

2021年8月22日

３DモデルYouTube参加型企画

WEBサイトに取り入れる3Dについて勉強すべく、いつも参考にしているYouTubeのチャンネルがあります。

もんじゃさんという、ゲーム専門のプロモデラーの方が、3Dツールの使い方をめちゃくちゃ分かりやすく解説してくれるYouTubeです。
blenderの勉強で見始めたのですが、参考になるだけでなく語り口調が面白いので、いつもわくわくしながら見ています。

その「3Dのメモ帳」にて、

CG系Youtuber応援企画！みんなでジオラマ作る！～街編～【blender2.93】

という企画が始動しました。
CG系のYouTuberさんのbelnderのアセットを集めて、もんじゃ先生がジオラマを作るという企画です。

これは…やりたい。（CG系でもYouTuberでもないくせに…）

というわけで、すぐさま手元にあった金閣寺のミニチュア模型を見ながら金閣寺を作ったのですが、
送る直前になって
「いや…これやっぱり派手すぎん？」
と思い、色を変えて「金閣寺風」の寺を送りました。

YouTube内で、集まったアセットが一つ一つ紹介されています。
アセット紹介その2で、金閣寺もどきも紹介していただきました。

12:38 からが金閣寺もどきの紹介になっていますが、
他の方のアセットがすごい。是非最初からみてください。

金閣寺もどきに入り口をつけ忘れるという失態を、オイシイ具合に笑いにしてもらっております。ありがたい（笑）

Three.jsでロードしたものがこちら

金閣寺もどき

const THREE = window.THREE = require('three');
require('three/examples/js/loaders/GLTFLoader');
require('three/examples/js/controls/OrbitControls');

let renderer;
let scene;
let gltfLoader;
let camera;
let controls;
let model;
const url = '3d/kinkakuji/kinkakuji.glb';

const canvas = document.getElementById('canvas');

// ウィンドウサイズ設定
let width = document.getElementById('canvas-wrap').getBoundingClientRect().width;
let height = document.getElementById('canvas-wrap').getBoundingClientRect().height;

// 実行/イベント処理
window.addEventListener('DOMContentLoaded', init);
window.addEventListener('resize', onResize);

function init() {
  // レンダラーを作成
  renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    alpha: true
  });
  renderer.setPixelRatio(1);
  renderer.setSize(width, height);

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

  // Load GLB
  gltfLoader = new THREE.GLTFLoader();
  gltfLoader.load(
    url,
    function (gltf) {
      model = gltf.scene;
      scene.add(model);
      renderFC();
    },
  );
}

// glbロード後 カメラ・ライトの作成、tick実行
function renderFC() {
  createCamera();
  createLight();
  onResize();
  tick();
}

function createCamera() {
  camera = new THREE.PerspectiveCamera(30, width / height, 1, 1000);
  camera.position.set(0, 0, 15);
  controls = new THREE.OrbitControls(camera, canvas);
  controls.target.set(0, 2, 0);
  // 慣性
  controls.enableDamping = true;
}

// 光源
function createLight() {
  const light1 = new THREE.SpotLight(0xfff9ee, 4, 50, Math.PI / 6, 0, 0.5);
  const light2 = new THREE.PointLight(0xfff9ee, 2, 50, 1);
  const light3 = new THREE.PointLight(0xFFFFFF, 2, 50, 1);
  light1.position.set(-4, 5, -7);
  light2.position.set(4, 5, 5);
  light3.position.set(0, 0, 7);
  scene.add(light1);
  scene.add(light2);
  scene.add(light3);
}

function tick() {
  controls.update();
  renderer.render(scene, camera);
  animationFlame = requestAnimationFrame(tick);
}

// リサイズイベント発生時に実行
function onResize() {
  width = document.getElementById('canvas-wrap').getBoundingClientRect().width;
  height = document.getElementById('canvas-wrap').getBoundingClientRect().height;
  // レンダラーのサイズを調整する
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);
  // カメラのアスペクト比を正す
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
}

背景の黒はCSSで、canvasはアルファ設定にしています。

ライト３つ使って（特に意味なく）雰囲気出してます。このテカリ具合が金閣寺の名残です。

ジオラマが楽しみです。リリースになったら、また追記しようと思います。

追記：ジオラマ完成！

時は来た…。ジオラマが配布されました！

素材はすべて視聴者さんのもので、全部動画で説明されてましたが、世の中にはセンスのある人がいっぱいいるなあと毎回楽しく見ていました。レベル高いわぁ…。

本当にすごい。かわいい。

個人・商用利用可、クレジット表記不要、このデータを使用したことで発生した損失は自己責任ということです。

これらの素材使って、また何かブラウザで動くものを作りたいなと思っています。（いつになるやら…）

さらに追記：アセットを使ったBlender & Three.jsのサンプル

アセットを使ってフィールドを作り、カメラアニメーションをスクロールで動かすサンプルを作りました！

Blenderでカメラアニメーションを作成し、スクロールに合わせて動かす

応用が効きそうなJSのサンプルができたので満足です。…が、アセットを活かしきれた気がしない！（美的センスの意味で！）そっち方面のスキルも磨いていく必要性を強く感じました。

Blog