Zenn
Open7

Three.jsの学習メモ

JavaScript
WebGL
Three.js
Hiroki OKAHiroki OKA

Three.jsとは

  • WebGLを簡単に扱うためのオープンソースJSライブラリ．

Three.jsの基本概念

シーン

  • 3D空間を表す概念．
  • シーンに描画するオブジェクトやカメラ，ライトなどを追加しレンダラーで描画することで，ブラウザ上で3Dグラフィックスを表示する．

マテリアル

  • 物体の形状の外側がどのように見えるかを定義するオブジェクト．物体の質感設定，
  • 金属っぽい，透明，ワイヤーフレームなど．

ジオメトリ

  • 物体の形状．
  • 平面や円などの2次元のものと，直方体や球体などの3次元のものが用意されている．

メッシュ

  • 3Dのジオメトリとマテリアルを組み合わせたもの．

ライト

  • マテリアルがどのように表示され，影を落とす時にどう使用されるか．
  • 環境光源，平行光源，半球光源，点光源，スポットライト光源，矩形光源など．

カメラ

  • シーンに何を描画するかを決定するオブジェクト．
  • 透視投影カメラ (PerspectiveCamera) と 平行投影カメラ (OrthographicCamera) とがある．
Hiroki OKAHiroki OKA

シーンの作成とオブジェクト描画

import * as THREE from 'three';

// Scene
const scene = new THREE.Scene();

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
scene.add(camera);

// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('#myCanvas');
});
renderer.setSize(sizes.width, sizes.height);
renderer.render(scene, camera);
Hiroki OKAHiroki OKA

マテリアル

プロパティ

基本的なプロパティ

  • id, uuid, name, opacity, transparent, overdraw, visible, slide, clippingPlanes, clipShadows, needsUpdate

ブレンディングプロパティ: 描画する色が，物体の後ろにある色とどう相互作用するかを指定する

  • blending, blendSrc, blendDst, blendEquation, blendSrcAlpha, blendDstAlpha, blendEquationAlpha

そのほかの高度なプロパティ

  • depthTest, depth, Write, polygonOffset, polygonOffsetFactor, polygonOffsetUnits, alphaTest

基本的なマテリアル

単純なマテリアル

  • MeshBasicMaterial：シーン内のライトが反映されないマテリアル．
  • MeshDepthMaterial：オブジェクトの見た目はライトやマテリアルのプロパティにはよらず，オブジェクト-カメラ間の距離のみで決まる．
  • MeshNormalMaterial
  • MultiMaterial

高度なマテリアル

  • MeshLambertMaterial
  • MeshPhongMaterial
  • MeshStandardMaterial
  • MultiMaterial

ラインジオメトリで利用できるマテリアル

  • LineBasicMaterial
  • LineDashedMaterial

単純なマテリアルの実装

 const myMaterial = new THREE.MeshBasicMaterial({
 	color: 0xff0000, name: 'material-1', opacity: 0.5
 	transparency: true, ...
 });
Hiroki OKAHiroki OKA

ジオメトリ

基本的なジオメトリ

2D

  • CircleGeometry, RingGeometry, PlaneGeometry, ShapeGeometry

3D

  • BoxGeometry, SphereGeometry, CylinderGeometry, ConeGeometry, TorusGeometry, TorusKnotGeometry, PolyhedroneGeometry, IcosahedronGeometry, TetrahedronGeometry, OctahedronGeometry, DodecahedronGeometry
Hiroki OKAHiroki OKA

メッシュ

メッシュの基本的な関数とプロパティ

プロパティ 説明
position オブジェクトの親要素の位置からの相対一を指定する
rotation オブジェクトを任意の軸周りに回転させる
scale オブジェクトをx, y,z軸を基準に拡大縮小できる
visible falseにした場合，Three.jsはTHREE.Meshを描画しない

関数ではtranslateX(), translateY(), translateZ()などをよく使う

Hiroki OKAHiroki OKA

ライト

ライトの種類

  • AbmientLight: 環境光源．ライトの色がシーン全体に適用され，影を落とさない．また全てのオブジェクトを形状にかかわらず同じ色にするため，シーン内で単独で利用されることは少ない．
  • PointLight: 点光源．光が全ての方向に発散する空間内の一点．影は落とさない．
  • SpotLight: 卓上ライトやスポットライト，松明のような円錐状のライト．影を落としたい時に使う．
  • DirectionalLight: 無限遠光源．特定の方向に放射される光で，発生する光線は全て平行になる．太陽の光など．
  • HemisphereLight: 半球光源．上からさす光の色と下からさす光の色を分けられる．屋外にいるような自然なライティングができる．
  • LensFlare: 太陽など明るいものを写真に撮った時の光輪．ゲームや3D画像でレンズフレアを使うと，シーンがより現実的に見える．

ライトオブジェクトを作成する例

 const ambiColor = "#0c0c0c"
 const ambientLight = new THREE.AmbientLight(ambiColor)
 scene.add(ambientLight)
Hiroki OKAHiroki OKA

カメラ

PerspectiveCamera (透視投影)

  • 自然な見た目で，カメラから遠方にある立体ほど小さく描画される
  • プロパティ: fov, aspect, near, far, zoom

OrghographicCamera (平行投影)

  • 全ての立体が同じサイズで描画される．
  • オブジェクト--カメラ間の距離は描画サイズに影響を与えない
  • ex) シムシティ4, シヴィライゼーション
  • プロパティ: left, right, top, bottom, near, far, zoom

クリッピング

3D空間内の全てのポリゴンをレンダリングするとパフォーマンスが下がるため，レンダリングする区間を制御すること．nearやfarプロパティを使う．