本当に簡単に、たった10行くらいのコードで『3Dプログラム』を描画することができます。『3Dプログラム』の感覚を掴むというのもいい手かもしれません。『クリエイティブコーディング』関係ではこんな記事も読まれています。『P5.js(ProcessingのJavaScript版)』でトーラス(ドーナツみたいな形)を表現するとこうなります。CodePen.コードはこちら。20);pop();}たった10行くらいのコードで3Dの物体が描画できています。『3Dプログラム』特化の『Three.js』と、より高度な『WebGL/GLSL』と比較してみると・・Three.js・・四角形を描画するのに約50行。WebGL/GLSL・・三角形を描画するだけで約220行。user【3Dプログラム】の基本を【Three.js】でまとめてみた【初心者向け】https://coinbaby8.com/3dprogramming-basic.html3Dプログラミングは難しい・・・なんたって数学多いし用語たっぷりだし・・・そんな風に考えていたこともあったけれど。わかりやすく【図解】してみたhttps://coinbaby8.com/webgl-beginner.htmlプログラミングでかっこいい映像を作りたいととりくみ始めた『GLSL(シェーダー)』。インターネットで『シェーダー』を使うには、『WebGL(ウェブジーエル)』なる仕組みを使えばいいのですが、『生のWebGL(ウェブジーエル)』難しいっす・・という意見も多いようで。『3Dプログラム』といえばおなじみセットがこちら。先ほどの最小構成の場合、シーンモデルだけで『3Dプログラム』が描画されています。さっきまで『WebGL/GLSL』を触っていた身としては、アオキなんてシンプルなんでしょう・・と思わずあんぐりしてしまうくらいのシンプルさ。最初の取っ掛かりとしては本当にオススメだなと思います。『2D』と『3D』の最も大きな違いはもちろん『座標系(ざひょうけい)』。『P5.js』の場合は『原点』も変更になります。『2D』・・横軸がX、縦軸がY。『3D』・・横軸がX、縦軸がY、奥行きがZ。奥の方に描画されて小さく見えます。ライトとマテリアル『P5.js』は本当に簡単に『3Dプログラム』ができてしまうのですが、より『3Dっぽさ』を出すとすれば、ライトモデル(メッシュ=ジオメトリ(骨格)+マテリアル(表面))などの、『3Dプログラム』のお作法を取り入れることになるかなとは思います。『normalMaterial(ノーマルマテリアル)』というメソッドがあるのがわかるかと思います。CodePen.コードはこちら。10);pop();}左側・・マテリアルを指定していない。3Dの骨格(ジオメトリ)が表示。右側・・マテリアル(表面の質感)を指定。