いよいよthree.jsでページを作り込むわけですが、その前に、ページの動きやイメージをちゃんと形に起こそうと思い、設計をして、そのために必要な3Dとアニメーションは何かを洗い出しました。

ちなみに今回作るページですが、このサイトのaboutページです。

作成したイメージ図がこちらです↓よく脳が宇宙にいくので、宇宙からはじめる事にしました。

動きのイメージも書き込んでいったのですが、、果たして出来るんだろうか。

なんとなくのやり方は把握したのですが、全くわからん。わからんけど、なんとかやってみます。

ここに書いたら、投げ出せなくなるので、途中経過をどんどん書いて上げて行こうと思います。

そしてあんなに苦しんでいた3D制作が、今はとても楽しいです。

こちらのパーツも仕事終わりの4時間で作れる様になりました。楽しい。

美しい彼で出てくる、アヒル隊長も作ってしまいました。クリックしたら360℃見れます。我ながらかわいいなと思っております。

楽しい。細かいところまで自分でこだわって作れるのが楽しい。

three.jsをクリア出来たら、いろんなキャラクターだったり、世界を作りこみたい。

やりたい事がどんどん出てきます。

３Dの勉強を始めてから、大好きなピクサー映画を見ると、どれだけ凄いものだったのかがわかって今更ですが、泣きそうになります。

「インサイドヘッド」の各キャラクターの質感のこだわりが本当にすごい。すごすぎる。あとストーリー内で3Dと2Dの世界で遊ぶセンスに脱帽します。

ピクサー新作映画の「マイ・エレメント」なんて予告だけで泣ける。映像がすごすぎるよ。

ピクサーには程遠すぎるけど、自分でも3Dが作れました。

想像する力があれば、どんなものだって出来るのかもしれないなって最近思います。

そしてどれだけ技術が発達したって、想像する力がなかったらいい作品なんて作れない。

だから想像する力と、自分の気持ちを大切に（仕事だとお客様、ユーザーの気持ちを大切に）、明日もモノ作りを頑張りたいなと思います。

さて、なんだかいい感じの言葉で締めましたが、次回のブログ記事はおそらく

「snowmanコンサートin 東京ドームにぼっち参戦することになったオタが、うちわを作ってみたよ」

だと思うので、よろしくお願いします。

ドラマ「美しい彼シーズン2」が、去年に続き、ギャラクシー賞「マイベストTV賞」第17回グランプリを受賞しましたー！シーズン2は、1話30分の全4話しかなかったのに、2年連続で受賞は凄い。さすが！！

さてさてそんな中、前回の記事でベイクが終了して、またボーン地獄。と書いていましたが、

UV展開とベイクをなめてた

2023-05-15

ボーンがコピペできることを知りました！（調べておけよって話だけど）

ボーンを1から作る事なく、ウェイトペイントを塗る作業で終わりました！何度もやった作業なので、もう今となっては余裕の作業です。

（とはいえ、やっぱりボーンを入れる前にベイクをしておいた方がいいです。）

そんなわけで前回作ったアクションも残ってるから、ただthree.jsのコードを追記するだけだーー！やったーー！と思い、コードを書いてアップしたわけです。

ちなみにコードはこちらです。

window.addEventListener('DOMContentLoaded', init);

function init() {
    // レンダラーを作成
    const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#canvas'),
    });
    // ウィンドウサイズ設定
    width = document.getElementById('main_canvas').getBoundingClientRect().width;
    height = document.getElementById('main_canvas').getBoundingClientRect().height;
    renderer.setPixelRatio(1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    console.log(window.devicePixelRatio);
    console.log(width + ", " + height);
    renderer.physicallyCorrectLights = true;
    // シーンを作成
    const scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x691DB3 ); // 背景色
    // カメラを作成
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    camera.position.set(0, 2, 500);
    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    let mixer;
    let clock = new THREE.Clock();
    const actions = [];
    // glbファイルを読み込み
    const loader = new THREE.GLTFLoader();
    const url = 'https://adosom.com/webgl6/moco.glb';
    let model = null;
    loader.load(
        url,
        function (gltf) {
            model = gltf.scene;
            model.scale.set(80.0, 80.0, 80.0);
            model.position.set(0, (window.innerHeight / 3 * -1.2), 0);// ブラウザの中心に持ってくる設定
            scene.add(model);
            //ANIMATION
            mixer = new THREE.AnimationMixer(model);
            // 複数のアクションすべてを再生
            gltf.animations.forEach(animation => {
                actions.push(mixer.clipAction(animation).play());
            })

            animate();
        },
        undefined, function (e) {
            console.log(e);
        }
    );
    renderer.gammaOutput = true;
    renderer.gammaFactor = 2.2;
     // animation
    function animate() {
        requestAnimationFrame(animate);
        const delta = clock.getDelta();
        mixer.update(delta);
        controls.update();
        renderer.render(scene, camera);
    }
    // 平行光源
    const light = new THREE.DirectionalLight(0xFFCFC8, 2.0);
    light.position.set(0, -50, 0); // 光源の位置を指定
    // シーンに追加
    scene.add(light);
    // PointLightを作成
    const pointLight = new THREE.PointLight(0xFFCFC8, 2.0);
    pointLight.position.set(0, 0, -500); // 光源の位置を指定
    scene.add(pointLight); // シーンに追加
    //環境光源(アンビエントライト)
    const ambient = new THREE.AmbientLight(0xFFCFC8, 3.0);
    scene.add(ambient); //シーンにアンビエントライトを追加
}

ワクワクして開いた結果がこちらですよ。。

クリックしたら気持ち悪い動きが見れます。

とても気持ちが悪い。

いやぁ、、毎回何かしらしてくるのなんなん。

ブラウザで動いてるのは確認できるけど、コードで「複数のアクションすべてを再生」の設定でしか動かないから、間違っているのはblenderのアニメーションという事がわかり、試行錯誤したわけですよ。

途中本当にホラー映像になりました。

そしたらblender上で無駄なアクションが3つほどあるのがわかり、必要なもの以外全て削除しました。

どうやら色んなアクションが同時に動こうとして変な動きになっていたようです。

そんなわけで、無事！走るアニメーションを表示させることができましたーーー！！！！

https://adosom.com/webgl6/

まだちょっと動き変だけど…そしてスマホで見ると汚いけど。。もう少しブラッシュアップが必要ですね。

思えば、自分がブログのサムネイルで作ったアニgif画像の子を3Dにしよう！という軽い気持ちから始まったblenderの勉強。

懐かしい… 思えば夜中のテンションで誕生しました。

まさか7ヶ月もかかるとは。。心折れてやらなかった期間もありますが、本当に自分が作った3Dをブラウザに表示させられる様になるとは。。

感慨深いものがあります。

画像で思い出を振り返ってみましょう。

最初はクリーチャーが爆誕しました

3D出来た事が本当に嬉しかったけど、今改めて見ると全然かわいくない

ここで発狂

恐怖

時間がかかりすぎてたベイク作業

最後の最後まで驚かす事を忘れない

….blender初心者は皆こんなものだと信じたい。

が、

実はここからが本番です。

そうです。three.jsの勉強全然できてないよね。

blenderの勉強になっとる。

私がしたいのは、ブラウザ上でスクロールすると3Dのアニメーションが動いていくストーリー性のもったページを作ることです。昔から自分が作ってみたかったwebサイトが自分1人の力だけでできるのか。

読み込みスピードがとても重くなりそうだけど。やってみます。

完全に自己満の世界。

動きのイメージは出来ているので、あとは勉強あるのみですね。

頑張ります。

突然脳内に「負けないで」の曲が流れてきたので、久しぶりに聴いたらなんかグッときました。名曲ですね。

こんにちは。沼LV1からお届けします。沼について詳しくは前回のブログをご確認ください..

沼

2023-05-12

前回のブログを冷静になって見ると、興奮しすぎてましたね。文章から鼻息が聞こえてくる..

久しぶりに雑誌や写真集を購入してました..萩原利久おそるべし

さて、今回もblender記録日記になるのですが、今回は先にベイクで色がちゃんと入ったキャラクターをご覧ください。

https://adosom.com/webgl4/

やっぱり3Dは照明が決め手ですね。

ベイク前がこちらになるので、大分イメージ通りになりました！

このベイク作業ですが、GWから始めたけど全くうまくいかず、

とっっっても時間がかかっております。（沼にいたからって事もあるけど）

完全にベイクなめてた。

何回やってもベイクが上手くいかず、目の紫部分に黒い線が入っていました。

私がミスをしていた原因ですが、UV展開が上手くできていなかったからです。

UV展開とは、3Dにシームという切り込み線を入れて平面にし、そこに色を入れていく作業になります。そして今回の場合は照明や影も色としていれたかったので、平面にベイクという名前の通り焼き込み作業をしています。

目の周りにシーム（赤い線）を入れて展開すると左側に平面図が表示されます。

UV展開がうまくいっていないとおかしいベイクが出来上がり、3Dに貼り付けても綺麗に表示されません。

先ほどの目玉部分のベイク失敗例がこちらです。

UV展開をしてベイクするとこういう画像が出来上がります。

そして一つ一つのベイクに時間がとてもかかります。

そんなわけで、今週は仕事が終わると頭の中で立体物をどう切り込んでいったら上手く平面図ができるかを考えポチポチ線を入れていき、展開→ベイク→20分〜40分（推しの動画やSNSを見ながら待って）ベイク画像確認。おかしかったらやり直し。

を繰り返しました。気づいたら3時とかだったので、今週は目がバッキバキです。

ちなみにベイクした平面図は画像として保存されるので、photoshopで編集可能です。

こちらは前髪のベイク画像になります。

なので、ちょっと黒いのがあったりしたらphotoshopで修正をしたりしました。

UV展開のコツを掴んで、全パーツをベイクする事1週間。出来たのが最初に見せたこの子です。

泣ける。

最近の朝の日課が、まず起きたらPCを見てベイクチェックをしていたのですが、今朝完成した時、本当に嬉しくて友達に見せました。そこで気づくのですが、

パンツだけベイクするの忘れてた。

謎に光り輝く白いパンツ。

もうこれはこれでいい。見たい奴は見ろ！光り輝くパンツを！

という事で、ベイクも無事完了です！

そして、ここからがとても重要な話になるのですが、もしblenderで検索してこちらの記事を見てる人がいたら、声を大にして言いたい。

ベイクするのはボーンを入れる前！！！

そうです。ボーンを入れるためにパーツを全部統合させていたので、ボーンを入れた状態のキャラクターに対してパーツ毎のUV展開が無理でした。それをどうしても認めたくなくてGW中足掻いて試行錯誤していたのですが..　

無理でした。

なので、私はこれからまたボーン地獄へ突入していくわけです。

blenderボーン地獄日記

2023-05-12

何事もちゃんと過程を把握してから作業した方がいいですね。

ブラウザで3Dを動かせたいなら、3D作成→UV展開→ボーン→アニメーション。

ブラウザで3Dを動かせたいなら、3D作成→UV展開→ボーン→アニメーション。

.. やりたい事への道へはまだまだ先なのですが、ここまで出来たから出来るという謎の自信はつきました。

次回はブラウザ上で動いてるキャラクターをお見せできる事でしょう。

頑張ります。

(追記)

ベイクの時間がとてもかかっていた原因がわかりました。

レンダーの最大サンプル数がデフォルトの4096になっていたからだったみたいです..単純なものなら1〜50、グラデーションが入ったものだと150くらいにするとほぼ5分以内でベイクができました、！

blenderボーン地獄日記

2023-04-09

今回はいよいよ、three.jsを使って３Dキャラクターをブラウザに表示させるまでの記録です。（ここまで本当に長かった..）

もうここまで来るとわかったことですが、
絶対に簡単にはできない。

まず最初から動かそうとはせず、仕組みを知るために、止まってる状態の3Dキャラクターをブラウザに表示させようと思いました。

blenderのオブジェクトモードで書き出したい箇所を選択→ファイル→エクスポート→gltf2.0を選択

エクスポートを行います。

※「Punctualライト」にチェックするとblenderで設定したライトも保存できるのだけど、three.jsとの相性が悪いようで、ブラウザで見ると真っ白になりました。なのでライトはthree.jsのコードで設定します。

glbファイルを無事書き出せたことが確認できたら、今度はthree.jsサイトを開きファイル一式をダウンロードをしてきます。

https://threejs.org/

必要なファイルは下記３つのファイルです。

1. three.min.js
2. GLTFLoader.js
3. OrbitControls.js

ちなみにthree.jsサイトのeditorページを開き、書き出したglbファイルを画面にドラッグすると、正常に書き出しがされているか確認することができます。便利！

次からはいよいよコードを書いていくのですが、最近何かと話題になっているchatGPTに質問しながらコードを書いてみました。

すっごい雑な質問

こんな雑な質問にもスラスラ答えてくれる。なんて便利なんだ。

私はchatGPTのことを心の中で「ドラえもん」と呼んでいます。

何も調べずに、ただドラえもんが答えてくれたコードをそのまま書いたわけですが、ページを開いてびっくり。キャラクターが闇落ちした状態で表示されました。夜にこの作業を行なっていたのですが、こわすぎて震えました。

クリックしたらページが見れます。※表示に少しだけ時間がかかります。

調子に乗って痛い目にあう、のび太状態。

何回聞いてもうまくいかない。そりゃそーだ。内容を全く理解してないんだもの。

つぶれた状態で表示された時、ちゃんと勉強しようと強く思うのでした。

そんなわけで、ちゃんとコードの内容を理解するために勉強しました。

あとは、blenderで色の指定をマテリアルにしないといけないこと、テクスチャ部分はベイクという画像にする設定を行わないといけないことも学びました。

コード内容を理解し、blenderで学んだ照明の大事さをここでも学びます。

いろいろな方のブログや動画を見たり、わからない箇所はchatGPTに聞きながら書いたコードがこちらです↓

（あくまでも私が見つけてきたコードなので、もっといい書き方がある気もします。誰かのお役に立てれば..）

ちなみにblenderで-yを前面にしていた場合になります。

<body>
    <div id="main_canvas">
      <canvas id="canvas"></canvas>
    </div>
    <script src="./assets/js/three.min.js"></script>
    <script src="./assets/js/GLTFLoader.js"></script>
    <script src="./assets/js/OrbitControls.js"></script>
    <script src="./assets/js/index.js"></script>
</body>

window.addEventListener('DOMContentLoaded', init);

function init() {
    // レンダラーを作成
    const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#canvas'),
        antialias: true,
    });
    // ウィンドウサイズ設定
    width = document.getElementById('main_canvas').getBoundingClientRect().width;
    height = document.getElementById('main_canvas').getBoundingClientRect().height;
    renderer.setPixelRatio(1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    console.log(window.devicePixelRatio);
    console.log(width + ", " + height);
    // シーンを作成
    const scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x691DB3 ); // 背景色
    // カメラを作成
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    camera.position.set(0, 2, 500);
    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    // glbファイルを読み込み
    const loader = new THREE.GLTFLoader();
    const url = '/moco.glb';
    // window size
    let model = null;
    loader.load(
        url,
        function (gltf) {
            model = gltf.scene;
            // model.name = "model_with_cloth";
            model.scale.set(80.0, 80.0, 80.0);
            model.position.set(0, (window.innerHeight / 3 * -1.2), 0);// ブラウザの中心に持ってくる設定
            scene.add(model);
            // model["test"] = 100;
        },
        function (error) {
            console.log('An error happened');
            console.log(error);
        }
    );
    renderer.gammaOutput = true;
    renderer.gammaFactor = 2.2;
    // 平行光源
    const light = new THREE.DirectionalLight(0xFFCFC8, 0.5);
    light.position.set(0, -50, 0); // 光源の位置を指定
    // シーンに追加
    scene.add(light);
    // PointLightを作成
    const pointLight = new THREE.PointLight(0xFFCFC8, 0.3);
    pointLight.position.set(0, 0, -500); // 光源の位置を指定
    scene.add(pointLight); // シーンに追加
    //環境光源(アンビエントライト)
    const ambient = new THREE.AmbientLight(0xFFCFC8, 0.8);
    scene.add(ambient); //シーンにアンビエントライトを追加
    // 初回実行
    tick();
    function tick() {
        controls.update();
        if (model != null) {
            console.log(model);
        }
        renderer.render(scene, camera);
        requestAnimationFrame(tick);
    }
    // アニメーションループ
    function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    }
    animate();
}

そして完成したのがこちらです。

https://adosom.com/webgl3/

※読み込みに少し時間がかかります。マウスを動かすとくるくるまわり、スクロールすると拡大縮小されます。

なんとか綺麗に表示されたことが本当に嬉しい。ブラウザに自分が作った3Dを表示させられたことが嬉しい。

ただ、blenderで作ったような見た目ではないし、目や髪が綺麗じゃない。この解決にはblenderでベイクという作業が必要なようです。他にも方法あるのかな..

この質感を頑張って再現させたい。あと色味が違うのでここも解決しないとですね。

そんなわけで、次回はベイクを使って、よりblenderで作った見た目に近づけて、そしていよいよアニメーションをつける作業を行いたいなと。

まだまだエラーをたくさん起こしそうだけど、blender地獄に比べたら全然かわいいものです。

頑張るぞ！！！

今回はキャラクターが動くまでの地獄の日々を、思いつくまま吐きださせてください。

2ヶ月くらい前の私は、３Dのキャラクター出来たし、あとは動かすだけだ！ゴールは目の前！と思っていました。
2ヶ月前の私に言いたい。

そこから本当の地獄がはじまるよ。

まず、キャラクターを動かすためには、ボーンという骨組みを入れることからはじまります。このボーンを動かすことで、キャラクターが動きます。そんなわけでキャラクターを動かすアニメーションを作るのであればボーンは必須になります。

それぞれのボーンに名前を振り分けて、親要素、子要素に分けます。

※ちなみに右側だけ作成して「アーマチェア」→「名前」→「自動ネーム（左右）」を選択、その後「アーマチェア」→「左右」を選択すると左側のボーンは自動で生成されます。

ボーンが完成すると、次はボーンと本体を結びつける作業です。

この作業をスキニングと呼ぶそうです。

そんなわけでオブジェクトモードで、統合された本体→ボーンの順番で選択して⌘＋Pを押して「自動のウェイトで」を選択すると、本体とボーンが自動で紐づくそうなので、やってみることに。

本体の統合に時間がかかりましたが、なんとか紐づけて、よし、動かせる！！！って思って動かした結果..

は？

は？？？？？

思わずtwitterで愚痴ると、いいねがいくつかついて共感者がいてくれたことに少し安心し、ありがたいアドバイスまでいただきました。（感謝..）

どうやら作りが複雑だと、紐づかないことがよくあるそうで、そんな時は「ウェイトペイント」でボーンの反映エリアを塗っていく作業が必要になります。

そんなわけでですね、ぽちぽちぽちぽち、ボーンを選択しては、そのボーンを動かすと、動けるエリアを塗っていったわけですよ。

赤いエリアが動く場所です。ちなみに編集モードで塗りたい場所を選択して、ブラシの「前面のみ」のチェックを外して塗ると裏側も楽に塗れます。頂点に塗り残しが少しでもあった場合動くと崩れるので慎重に塗っていきます。

一つ一つのボーンに対してウェイトを塗る作業に時間はかかりましたが、なんとか全部塗り終え、「よし、これで動かせる！」と思った結果をご覧ください。

。。。。

もーーーーーーーーーー！！！！！！！！！！！！

ぜんっっっぜん簡単じゃない！！！！！！！！！！！！！

そしてここで学ぶのですが、人の形をしたモデルを動かすには、ボーンを配置するだけではダメで、ボーンにIKとFKという名前の、ボーンを正常な位置で動かすためのボーンが必要になります。

それが出来たらスキニングに入ります。

この一連の作業をリギングと呼ぶそうです。

ちゃんと始める前にボーンについて調べなさいよって話。

この方の動画が本当に勉強になりました。感謝。

そうしてできたのがこちら

すんごい量のボーンだね。ただ、本当に動かしやすくなったし、おかしい動きはしなくなりました。

ただ、ボーンの向きが違ったりして、おかしくなったので同じ作業を二回しております。ボーントラップ。

手のひらのところで作ったIKボーンを動かすだけで、腕が綺麗に曲がるし、制限や角度指定もしてるので回転させると人体の構造通りの自然な動きになります。腕はX軸の方向が違うと崩れるので、向きに注意が必要です。

時間をかけて頑張ってやったんだから大丈夫だ。

よし！動かすぞ！ってドキドキしながら動かした結果がこれです。

ここで私は、ついに発狂します。

やってられるか！とお酒を飲み、ふて寝をするのですが、その夜に怖い夢を2回連続で見ました。

それが昨夜の出来事です。

完全にうなされているし、これはもう逃げられないなと。2回目に見た夢は本気で怖かった。

ということで、仕事が終わってからポチポチポチポチ修正に修正を重ね、根気よくミスがあったら何故かを調べ、ポチポチポチポチ…

そしてついに！

全身ちゃんと動かせるようになりました！！！！

…まだおかしい箇所たくさんあるけど。本当に嬉しくて、ちょっと泣きそうになりました。

そしてついにこの子が歩いたアニメーションがこちらです。

…….ちょっとまだ色々おかしいね.

ってことで、まだ修正が必要だし、まだまだやる事があるのですが

とりあえず投げ出さずにここまでやれた自分を褒めたい。

正直投げ出したくなった時もたくさんあったし、やらずに寝た日もあったけど、やはり何かをやり遂げた時の気持ちの良さは何事にも代えがたいなと。（まだやり遂げてないけど）

そして今回本当に引くくらいたくさんのエラーをして、学ぶ事がたくさんあった事、そして色々な動画やブログに助けられたので、私も誰かを助けられるblender記事をいつか書けるようになりたいなと思いました。

そんなわけできっと今夜は怖い夢を見ないで、安らかに眠れる事でしょう。

おやすみなさい。

(追記)

走らせる事もできました！！！やっと次からthree.js編突入です。

Three.jsの勉強をはじめました 02

2023-01-28

「引越しで忙しかった。」という言い訳をして大分先延ばしにしていましたが、流石にやらなければと思い、3Dの挑戦を年明けからゆっくりひっそりと続けておりました。
ただ、やっぱり3Dモデリングは本当に難しい！
前回の挑戦から何度もやり直しやり直し、、

なんか角度変えると気になる箇所があって、納得いくまで何度も顔をやり直して、、もう画面を見るのも嫌になった時がありました。

そして思ったんです。とりあえず、一旦全部最後までやり切れるキャラを作らないか。と

そもそも、「Three.jsの勉強（３Dをwebサイト上で動かす）」という事で始めた事なのに、何をここでつまづいてるんだと。

そんなわけで、今作っている複雑なキャラクターの制作は長時間かけて頑張る事にし（6月頃には完成させたい！）、簡易版のキャラを全身作ってみようと切り替えました。

もうモデリングの練習でアホみたいに触ったからわかるぞ！という思いで作業をはじめ、なんとか全身を作成しました。

それがこちらです。

….微妙

なんかいまいち可愛くない。学校の教科書とかに出てきそう。あれ…もしかして自分センスないのかな…と自信をなくし、死んだ目でBlenderの解説Youtube動画を眺めていたんです。

そしたら、ある動画で照明機能を使ってライトアップや質感とかを変えられる事を知りました。

そうして調整したのがこちらです。

お

おぉ

これは..自分で言うのもあれですが、なかなかいい感じになってきたのでは…？

照明を当てて質感を変えただけで、こんなに変わるなんて思っていなかったので、とても感動しました。3Dのコツは照明ですね。

こちらの動画で救われました！！！！本当に感謝！！！！！

こうなってくると、より可愛くしたくなってくるので、スタイルとか服装とか色とか調整していこうと思うのですが、

とりあえず全身出来た事が本当に嬉しくて、思わず深夜…というか明け方に感情のままにブログを書いています。

まさかあのクリーチャーからこんなにちゃんと見せられるものが出来るなんて…

今にして思えば、こいつにも照明当ててやりたかったな..

次はこのキャラクターが走ったり瞬きしたり、色々と動かす予定です。

そしてサイトに登場させて動かせるのがゴールです。

まだまだ続くこの挑戦。

引き続き頑張ります！

(追記)

キャラクターをブラッシュアップしました。3D制作楽しい。（単純）

目以外はマットにし、照明の色は白ではなく、暖色にするとよりいい感じになりました。

(さらに追記)

目を瞬きできる様に改良。髪の毛の色にグラデーションを入れてみました。

Three.jsの勉強をはじめました

2022-10-28

今回はその途中経過になります。
先に謝罪をさせてください。three.jsの勉強は一旦ストップしております。

ストップした理由ですが、勉強しようと本屋に行ったところthree.jsの本がどこにも無く..もう終わったのか？と不安に思い、エンジニアの知人に聞いてみたところ、３Dをやりたいんだったら他のソフトで作った方がいい。と言われました。three.jsで全てをやろうとしたのがそもそも無謀だった様です。

あと、やっぱりちゃんとJavaScriptの勉強をしないと作れないと思いまして、職場のエンジニアの方にこちらの本を借りました。少しずつ覚えていきます。

改めて調べたところ、どうやら私がやりたい事で考えた時に、３D制作ソフトで３Dモデルを作り、そのファイルをThree.jsを使って表示するのが良さそうでした。（私が調べてみての話なので、もしかするともっといいやり方があるかもしれません。）

なので私の中で、だったらまずは3D制作ソフトで３Dを作ってみよう！という流れになりました。

今回私が使ったのは、blenderという３D制作ソフトになります。

Blenderは、全世界にユーザーがいるオープンソースの3DCG制作ソフトウェアです

まずは練習として、このブログ内で登場した女の子を３Dにしてみようと思いました。

この子を３Dにしてサイトに表示して360度回転させよう！って思ったんです。あの頃は…

※注意！今回はややホラーチックな画像が多めに登場します。ハッピーハロウィン！って事で、あたたかい目で見て頂けると嬉しいです。

軽い気持ちではじめた３D制作

昔から作ってみたかった事もあって、ワクワクしながらblenderを起動しました。

ちなみに今回参考にさせて頂いた動画はこちらになります。（大変わかりやすかったです！）

まずは平面で正面を展開していき、徐々に立体的にしています。

ここでちょっと様子がおかしい事に気づけばよかったんだ。

ここで色々と初心を思い出したのですが、全く使った事のないソフトを使う時って、当然ですが時間が凄くかかります。慣れ親しんだadobeではないので簡単な操作さえわからない。

パーツや頂点を移動させるにはGキーを押さないと動かない事、E+Sキーを押さないと拡大縮小が出来ない事さえも、調べてやっとわかりました。何もわからない状態だったので、動画では10分くらいで済む作業も、1時間くらいかかっています。

（ここで私は会社の新人の子達の気持ちがわかりました。覚えるのって大変だね..）

そんなわけで試行錯誤し、4時間以上かかってできたのがこちらです。

ここでスムーズシェード機能を入れると、よりなめらかになります。（キャプチャ撮るの忘れてました；）

途中までだけど、ここまでできた事が本当に嬉しくて、時計を見たら3時になってたので慌てて寝まして、翌日職場の人に見て見てーって軽い気持ちで見せたのですが、返事が

「怖い！！！！！」でした。

そこで私は我に返ります。

たしかにすんごい怖い。目玉くり抜かれてるじゃん。

顔のパーツを整える事に夢中になりすぎて、デザインでも大事な「客観的視点」が、すっかり抜けていました。

（あれ、なんか色々おかしいかもしれない…）と、心がザワザワしだします。

が、しかし！

動画内で先生が、「完璧にこだわりだして、結局終わらず挫折してやめてしまう人が多いから、とりあえず最後までやってみるのが大事です。」と素敵な事をおっしゃっていたので、私はこの３Dを最後までやり抜いてみよう！と

頭の隅で感じていた違和感を無視して、前回やった作業も忘れつつある中、無理やり突き進みました。

※ここから本当にご注意ください。

は？

目もだけど口どした？

何があった？

見事に全角度気持ち悪い。

こんなに酷くなるとか、ある意味才能かもしれない。。なんて思いながらも必死に修正をするのだけど、やればやるほど、どんどんクリーチャー化していきました。

だんだんクリーチャーにさえ愛着が湧いてきたところで、これはダメだ！もう一回やり直そう！と、思い切って削除しました。

さようならクリーチャー。

トライアゲイン ３D制作

さて、気を取り直して、改めてゼロから動画を見直してやってみたのですが、最初4時間かかった作業も、1時間半で完成したし、コツもだんだん掴んできました。耳と目も入れて4時間。

出来たのがこちらです。

正面から見るとまだちょっと怖いけど、1回目の時より、見れる感じになってますね。ちなみに白目は最後に色を入れる時に入ります。

そして翌日の夜、色は最後に入れよう！って思いまして、この勢いで髪を入れてみよう！って思ったんです。

髪は顔よりは簡単だろう！って思ったんですよ。あの時は…

…  茄子のヘタですね

ちなみにこの髪を作るだけで3時間ほどかかっています。

髪の方が難しい。

正直ちょっと心が折れかけましたし、そもそも作ろうとした女の子ってもっと単純なキャラだったよね？なんで鼻とかリアルにしだしたの..って自分を責めたりしましたが、ここまで来たらもう引き下がれません。

何事もやり抜く事が大事です。

まとめ

そんなわけで、すみません。今回はここまでです。

私は今、世の中の３Dデザイナーの方々を本当に尊敬していますし、軽い気持ちで３Dはやるもんじゃないなって思いました。

ただ、思い描いていた形のものが出来あがってきた時は嬉しいし楽しい。やっぱり作り出したからには最後までやり抜きたいので、心が折れながらも頑張ってみようと思います。

次の「three.jsの勉強はじめました」シリーズの記事で、この子が可愛い状態で登場する予定ですので、乞うご期待ください！

追記）

クリーチャー化した原因の一つで、そもそも色の設定を間違えていたみたいです；（後半動画を飛ばして見てしまっていたのがダメでしたね..）

設定を変えまして鮮やかな色にできました！（クリーチャーじゃない！！！）が、色を入れた事で色々と細かく直したい箇所が出てきました。難しい…でも、凄く面白くなってきました。頑張ります。

髪の毛はやっぱり作り直した方が良さそうですね。

誰も見ていないだろうと思い、自由気ままに好き勝手やりたい様に作っていたのですが、頑張って作り込むほど、欲が出てくるのが人間というもので、検索に全く出てこない事への疑問だったり、一体どれくらいの人が見ているのか気になってくるのが人間という生き物です。

人間の欲とはおそろしいものですね。

そして私には昔、Googleアナリティクスの勉強をして資格を取ったという古の思い出があります。
それから時は経ち、すっっかり忘れ、アナリティクスもどんどん更新していき..アナリティクスを教えてくれた先生から「え 昔試験受けたよね？」って突っ込まれるくらい何もわからない人間になりました。

そんなわけで、自分が自由にいじれるサーバーもある事だし、これもいい機会だと思い今回色々やってみた事を自分なりにまとめてみたのですが、色々不安だったので私のアナリティクス先生momoさんに今回ご協力頂きました。

• 
  momo先生私にアナリティクスを教えてくれた同僚兼友達兼、先生です。
  仕事でSEOだったりアナリティクスを見てレポートを作ったりしています。ライターの仕事もしているので、正直このブログを見られるのは大変恥ずかしい。
  momoさんが執筆中の小説ブログもあるのでよかったらこちらも読んでみてください。https://note.com/ichinoinori/

※今回知識の乏しい私が色々と質問していく記事になる為、知識のある人には何も為にならない記事になります。ご了承ください

何人の人が見てて、何のページが人気なのか知りたい

ブログを書いていると、はたしてこの記事は楽しいのか？？って思ってしまう時があります。記事の質をあげるためには、人気のブログを見る。とかもあるけれど、自分が書いた記事の中で何の記事が人気だったのか、最後まで読んでくれなかった記事はないか。を知る事が一番だと思います。
そんな時に、無料で使えるアクセス解析ツール・Googleアナリティクスを設定すると、サイトの改善にとっても役に立ちます。

Googleアナリティクスは、Webサイトのアクセス状況を分析できるツールです。全部をマスターするにはそれなりの勉強が必要になります。

Googleアナリティクスの設定は割と簡単でGoogleアカウントがあれば、10分くらいで設定ができます。

登録するとコードが発行されるのでサイトのheadの中にコードを入れれば完成です。

moco
久しぶりのアナリティクス画面だ！！…なんか昔と変わってる気がする…


momo先生
2020年10月にGoogle Analytics 4（GA4）ってものに変わったよ** 2023年7月まではまだ旧アナリティクスも使えるので変更は可能です。
moco
エェ…であれば、もうほぼわからないです。先生！


momo先生
計測方法や項目がガラッと変わっているからね。少しずつ慣れていこう！

Googleアナリティクスは目的によって見る箇所が変わってきます。このブログの様に何の記事がどれだけ見られているか。何曜日が一番見られているかを把握しておくと、今後あげる記事だったりアップした方がいい日にちがわかってきます。それ以外にも、ユーザーがどこから来たか、どういう行動をしているか、何のデバイスで一番見られているか、ページ滞在時間まで様々な情報がわかります。

期間を選択して、その期間でどの記事が何人にどれだけ見られているかわかります。※ちなみに上記画像の表示回数は自分が確認して見た数も含まれてしまっていますが（こうやってみると私が凄い見てるのがわかりますね..）、自分を除外する事もできます。

moco
先生..今回調べてみてわかった事があります。オタク色が強すぎる記事はあまり読まれていないですね..


momo先生
….
moco
オタクっていうテーマがそもそもNGなのでは….


momo先生
zzz…

• 
  momo’sポイントアナリティクスは色々な事が計測できてとても便利なツールです。サイトの改善に繋がるから大抵の企業サイトはアナリティクスを設定しているよ。そして2023年6月末でユニバーサルアナリティクス(旧アナリティクス)はサポート終了するので要注意！

せっかく公開したんだから、やっぱり皆に見て欲しい

時間をかけて頑張って作ったサイトなのに、結局誰も見ていない。というのはやっぱりこちら側のモチベーションが下がっていく一方だと思います。今回公開後しばらくしても検索に全くひっかからなくて、なんでー！って思いまして、Googleサーチコンソールを設定してみました。

Googleサーチコンソールは、Googleが提供しているインターネット検索の分析ツールになります。これを入れるとGoogle検索キーワードの表示回数だったり、サイトが抱えている問題点などを確認でき、サイトの改善に役に立ちます。

サーチコンソールに関しては今まで誰かに依頼した事しかなかったのですが、実際自分で設定してみると思っていた以上に簡単でした。検索すると設定方法が出てくるのでその通りにやれば5分くらいでできます。

moco
設定できた！さてさて..どこを見ればいいんだ？….？？？？


momo先生
mocoさんは一体何が知りたいの？
moco
なんで検索上位に上がってこないのかを知りたいんです。先生。

サーチコンソールを登録すると、自分のサイトで改善しなけれないけない箇所が通知やメールで送られてきます。なのでまずはそこをチェックしてみましょう。ペナルティが多いと信頼性の低いサイトと認識されて最悪の場合、検索しても出てこなくなるから、必ずチェックはしておきましょう。

そして、ページ構造が複雑な場合、ちゃんとGoogleに読み込ませなければいけないのでsitemap.xmlを作成し、登録する必要があります。（sitemap.xmlは簡単に作れるサイトがあるので、そこで作って登録すればすぐ終わります。）

さらに！サーチコンソール以外にも、上げたいキーワードを散りばめた記事を書くとか、基本的にひとつの記事1キーワードで上げていくっていうのも検索を上位に上げるポイントです。

moco
あ……そうか。サーチコンソールを設定しただけでは検索が上位になるってわけでもないのか！


momo先生
….（だとしたら皆上位になるよね..）

• 
  momo’sポイントmocoさんみたいにGoogleサーチコンソールを設定したからといってすぐ検索上位に上がってくると勘違いしている人もいるけど、それは間違い。サイトの質が良くて、ちゃんとキーワードが入っているページであれば、上位に上がってくるから焦らずにしばらく様子を見てみるのも大事だよ！ちなみにアナリティクスとサーチコンソールは連携できるので連携しておくとさらに便利。

追記)
設定して改善してから4日後くらいに「adosom」では出てこないけど「adosom オタク」で検索すると一番上に出てきました！(…検索ワードが恥ずかしい)

モバイルフレンドリーでは、ありません。って気になる表示が。現在これを解決させようと格闘しております。

読みやすい記事ってどんな記事？

折角なので、他にも聞きたい事を聞いてみました。

moco
先生！私は見る人が飽きない記事を書きたいんです！


momo先生
（まーためちゃくちゃな事言ってきたな…）
moco
飽きない記事ってどんな記事でしょう？

• 
  momo先生

  トレンドや新しい情報はいち早くキャッチしておきたいよね。人は最先端に弱い生き物だから。
  あとは、あまり知られていないWeb知識を載せたりニッチなところを狙うと面白いかもしれないね。
moco
….（このブログどれにも当てはまってない！）

読みやすい記事でいうと、誰をターゲットに、どういった内容を伝えたいのかがとても大事です。軸を明確にしておくこと、一文はなるべく短く。自分で読み返した時に息継ぎができる句読点の使い方も重要です。

• 
  momo’sポイント個人で書いているブログなので、基本的には書き手が楽しいことが一番！でも、多くの人に読んでほしい、検索上位にいきたいなどの目標ができたら、それに合わせてどういう手法を取っていくか考えてみよう。 文章力は書けば書くほど上がるので、基本がわかっていれば大丈夫！

moco
が、頑張る！！！！！！！！！

まとめ

さてさて、今回はちょっと専門的な記事にしたかったのですが、やっぱり難しいですね。。世の中の専門的な記事を書いてる人は本当に凄い。momo先生のサポートが無かったら決して書けなかったこの記事。優しく引き受けてくれたmomo先生お忙しいところご協力本当にありがとうございました。そして思った以上にとても勉強になりました。

私は普段、仕事でサイト制作をやっていて、制作側からすると公開までがゴールなところがあるけれど、お客様からすると当然ながら公開からがスタートで、新規ユーザーを獲得する為に試行錯誤して、サイトはどんどん更新されていきます。だから終わりなんかない、サイトは生き物みたいだなと感じます。

by いらすとや

自分がサイトを運用する側に立ってみて、公開後の大事さが改めてわかりました。ゴールじゃなかったなと。

とはいえこのブログは自分のストレス発散の場でもあるので、好きな事や気になる事を書く事はこれからもそんなに変わらないのですが（変わらんのかい！）、自己満ながらも飽きさせないブログにしていきたいと心がけていきますので、これからも読んでいただけると大変嬉しいです。

おまけ）

momoさんを先生先生呼んでたけど、よく一緒に飲む仲良しな友達です。今回は本当にありがとう！今度ビール奢らせてね

検索するとWebGLにはThree.jsを使うのがおすすめと出てきたので、Three.jsの勉強をしようと思いました。

でもそのためにはjsをちゃんと知らなければいけないのですが、私のせっかちな性格的にコードの基礎を最初から一つ一つ覚えるのが苦手でして、先に参考サイトからコードを持ってきて、その後コードを色々いじりながらこれは何なのかとか、どういう意味なのか。と調べるやり方をしています。（だからぐちゃぐちゃなのかもしれない…そしてjsはそれではダメなのかもしれない..）

Three.jsサイトにはThree.jsを実際使ってるサイトがたくさん載っていて見ていて面白いです。

そんなわけで今日、終業後から勉強をはじめたのですが、ほんっとーーーに難しい。。とりあえず形にはなったページがこちらです。。この動きだけでやっとでした。。↓

https://adosom.com/webgl/

※文字の後ろにあるパーツがthree.jsで作ったパーツです。マウスを動かすとちょっとだけ動きます。完全に背景の動画でごまかしています。あとスマホで見ると重いですね….（追記：パーツをこのブログのメインビジュアルに入れてみました）

参考というか、まるっとコードを持ってきていじらせて頂いたページはこちらです。
https://b-risk.jp/blog/2021/12/three-js-arrange/
（とってもわかりやすかった！）

丸とか四角とかを作るまではとりあえず出来た。

仕組みはなんとなく、、本当になんとなくわかったけど、難しい。。。世に出てる3Dを使用したサイトってどうなってんだろう。。未知すぎる。

未知すぎてデザイン案も思い浮かばない。。

自分のやりたいものが作れるのはまだまだ先だなと..できるところまで頑張ってみます。

ここに書かないと心が折れて諦めそうなので、引き続きこのブログで経過を書いていきたいなと思っています。あとなんでこの勉強を始めたのかもどこかで書ければなと。

頑張る。

サムネイル用に、作ったページのキャプチャ撮ったらなんだか素敵な画像になった。

最近、仕事終わってお酒ちびちび飲みながらコードをいじる時間がとても好きになっている自分がいます。