Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介

Nobuyoshi
December 04, 2021

 Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介

Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介を紹介します。

成果物

地球:
https://codepen.io/uemuragame5683/pen/YzWGEKv

月見:
https://codepen.io/uemuragame5683/details/ExXLWYR

フォント:
https://codepen.io/uemuragame5683/pen/wvexbMo

ハロウィン:
https://codepen.io/uemuragame5683/pen/NWvvZXW

Nobuyoshi

December 04, 2021
Tweet

More Decks by Nobuyoshi

Other Decks in Programming

Transcript

  1. 自己紹介 Name:うえむー  フロントエンドエンジニア Job Skill:html / css / scss /

    javascript / jQuery / gulp.js /php etc... Private Skill:next.js / React.js / nuxt.js / micro cms / go etc... Hobby:プログラミング学習・ゴルフ・ボードゲーム・麻雀 SNS・ブログサイト Twitter::https://twitter.com/uemuragame5683 ブログサイト:https://nu-blogsite.net/ ポートフォリオサイト:https://uemu-engineer.com/
  2. HTMLファイル作成、CDNを導入 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <script

    src="https://cdnjs.cloudflare.com/ajax/libs/three.js/ 110/three.min.js"></script> <script src="js/index.js"></script> </head> <body> <canvas id="myCanvas"></canvas> </body> </html>
  3. レンダラー作成 const width = 950 , height = 500; const

    renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#myCanvas') }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); 最初に、レンダリングするためにレンダラーを作成する必要があります。クラス に「canvas」変数と3Dのコンテンツを出力したい要素を設定します。

  4. カメラを作成 //カメラを作成 const camera = new THREE.PerspectiveCamera(画角,アスペク ト比,ニア(near),ファー(far); 画角・・・視点からの角度
 アスペクト比・・・縦横の比率

    ニア(near)・・・区間の開始距離
 ファー(far)・・・区間の終了距離 次に、カメラを作成します。カメラを作成しないとフロントには反映されません。 カメラを作成するためのコードは以下になります。

  5. メッシュを作成(コード) const geometry = new THREE.BoxGeometry(400, 400, 400); const material

    = new THREE.MeshNormalMaterial({color: 0xFFFFFF}); const box = new THREE.Mesh(geometry, material); scene.add(box);
  6. 光源設定 const directionalLight = new THREE.DirectionalLight(0xffffff); scene.add(directionalLight); const pointLight =

    new THREE.PointLight(0xffffff, 1, 10000); scene.add(pointLight); 最後は光源設定です。光源設定をするとメッシュがより立体的に見えます。設 定するのに時間がかかりました。