上の3Dは下のテンプレートで使用されている3Dイメージです。自分はこういうイメージを造ることが出来ず、AdobeStockから買うのも悔しいのでBlenderに手をつけてしまいました。
Blenderを使うことのメリット
- 上のような3Dイメージなど、高機能で他の本格的な3Dソフトと変わらない表現が無料で作成可能。Cinama4Dが年間16万のサブスクリプションに対して明らかにメリットです。
- Blenderの学習リソースは非常に多く、有料のものを選べば非常に質の良い内容のチュートリアルで学習出来る。
- Three.jsをやっていてコーディングで行き詰まった時に、GUIで3Dをやることでまた3Dをコードで書くモチベーションが戻ってくる
Blenderを使うことのデメリット
- 質の良い3DイメージはAdobe Stockで手に入るのに、敢えて自分で作ることで数ヶ月という学習時間が奪われる。
- 3Dはウェブデザイナーの必要条件ではないので、自分の将来目指している方向に時間を使うほうが機会費用の損失が起こらない
- 3Dソフトは若い頃にも触ったことがあるが、絵心がないと魅力的なものは作れない
結論：Three.jsの学習の息抜きや取り込むモデルの作成には使える可能性
コードを書いていると、オリジナルのものを作っているときは良いですが、学習中はチュートリアルに沿って書くのであまり面白くありません。そういう時に気分転換として選択肢に入れても良いかもしれないと思っています。
現在使用しているThree.jsの学習ソースは90時間のコース
現在、使用しているのはThree.jsの公式サイトでも学習リソースとして推薦されているThreejs-Journeyというサイトです。一日おきぐらいに２つか３つ進めても数ヶ月は終わるまでにかかる計算になります。そうすると、どうしても自分のやる気のムラに流されて途中で飽きてしまいかねません。しかし、このコース自体は物凄く分かりやすく丁寧に解説してくれて、3Dソフトを触ったことがある人でも無駄になる知識は一つもありません。このコースの中でもBlenderからモデルを取り込むチュートリアルが含まれています。
Three.jsのビデオチュートリアルを探すならShaderの解説が詳しいものが良い。
はい、Shaderをいかに作るかで3Dの単純なモデルを何倍も魅力的に魅せたり、2D ImageをマッピングしてImageの中身のピクセルに特殊効果をかけられるようになります。ZTMもJS Masteryもこの部分のチュートリアルが薄いので、先にあげたThreejs-Journeyをオススメします。
コーディングに取り掛かるまでに時間のかかる私
生まれつきの性質ですが、面倒なことは大嫌いな性格です。出来ればコーディングなんてしないで作りたいものが作れたら、そのほうが断然良いです。ということで、散歩をしてエナジードリンクを飲んだり、一つチュートリアルが終わったらブログを書くといった調子で、コーディングをして作りたいものはあっても、コーディング自体が面倒なのでなかなか取り掛かれません。直感的なGUIソフトを触ることは、そんな時間の無為さを埋めてくれる可能性があります。なのでFigmaのAnimation表現の使い方を学んだり、AfterEffectsを学んだりBlenderを学ぶことは、逆にやる気を出すために使い方次第で役立つ可能性があります。まあ、でも買ってしまったチュートリアルでも一定期間内なら返金出来るのでもう少し考えます。
結論
Three.jsの学習はBasicのセクションをなかなか抜け出せず、まだ下のようなイメージしか造れるようになっていません。自分の性格的には直感的に結果が見えるGUIのソフトを使ったデザインが好きですが、コーディングは使ってるWebSurfってエディタがこれから書こうというコードをオートサジェストする精度が高すぎて、自分で書いて間違える心配もないし、AI時代になってAIが助けてくれるので、心理的抵抗感は減って、むしろ武器にしないと損な時代に入ったと思っています。
Three.js Random GeometeryImage
