インストール

npmからインストール

ターミナルで実行するタイプのやつ

CDN，静的ホスティングからインストール

URLでimportする．
補完機能が使えない．

ソースコードを落とす

githubからインストール．

使うファイルは，
build
examples/jsm

インポートする

.html

bodyタグ下部に記載する場合，

<body>
  <script src="/to/main.js" type="module"></script>
</body>

typeを指定しないとエラーになる．

.js

import * as THREE from "/to/build.three.module.js"

を文頭に．

基本

座標軸について

x軸は赤，y軸は緑，z軸は青で表現する

構成

Scene, Camera, Rendererの3構成

透視投影カメラ

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

fov:
垂直視野角
aspect:
アスペクト比
near:
投影開始距離
far:
投影終了距離

Renderer

https://threejs.org/docs/index.html?q=render#api/en/renderers/WebGLRenderer

webのやつ？？

WebGLRenderer( parameters : Object )

parameters: (opt)

pythonでいうdictの形で与えればok．
canvas:

レンダーが出力するcanvasの指定．何も渡さないと，新しいcanvas要素が作成される．

context:
This can be used to attach the renderer to an existing RenderingContext. Default is null.
これを使用して、レンダラーを既存のRenderingContextにつなげる．デフォルトは null．

precision: {"highp", "mediump", "lowp"}
デフォは "highp" (デバイスがサポートしている場合)．ここの"Things to Avoid"の注釈を参照．

alpha:
canvasに透明度を付与するか．デフォはfalse．背景画像を用意する場合はtrueに．

premultipliedAlpha:
色に透明度を適用するか．デフォはture．

antialias:
アンチエイリアスを行うか．デフォはfalse．

stencil:
whether the drawing buffer has a stencil buffer of at least 8 bits. Default is true.描画バッファが少なくとも8ビットのステンシルバッファを持つかどうか。デフォルトはtrueです．

preserveDrawingBuffer:
- whether to preserve the buffers until manually cleared or overwritten. Default is false.
手動でクリアまたは上書きされるまでバッファを保存するかどうか。デフォルトはfalseです．

powerPreference:
Provides a hint to the user agent indicating what configuration of GPU is suitable for this WebGL context. Can be "high-performance", "low-power" or "default". Default is "default". See WebGL spec for details.
のWebGLコンテキストに適したGPUの構成を示す、ユーザーエージェントへのヒントを提供します。指定できるのは高性能"、"低消費電力"、"デフォルト "のいずれかである。デフォルトは "default" です。詳細は WebGL 仕様を参照してください。

failIfMajorPerformanceCaveat:
低パフォーマンスが検出されたときにレンダラーの作成が失敗するかどうかを指定します。デフォルトは false です。詳細については、WebGL 仕様を参照してください。
whether the renderer creation will fail upon low performance is detected. Default is false. See WebGL spec for details.

depth:
whether the drawing buffer has a depth buffer of at least 16 bits. Default is true.
描画バッファが少なくとも 16 ビットの深度バッファを持つかどうかを指定します。デフォルトは true です。

logarithmicDepthBuffer:
whether to use a logarithmic depth buffer. It may be necessary to use this if dealing with huge differences in scale in a single scene. Note that this setting uses gl_FragDepth if available which disables the Early Fragment Test optimization and can cause a decrease in performance. Default is false. See the camera / logarithmicdepthbuffer example.
対数の深度バッファを使用するかどうか。1つのシーンでスケールの大きな差を扱う場合、これを使うことが必要かもしれません。この設定は、gl_FragDepth が利用可能な場合、 Early Fragment Test の最適化を無効にし、パフォーマンスの低下を引き起こす可能性があるため、使用することに注意します。デフォルトは false です。カメラ / logarithmicdepthbufferの例を参照してください。

物体(ジオメトリ)を作成する

ジオメトリのみでは表示されない(マテリアル等が必要)．

球体

SphereGeometry(
  radius: Float,
  widthSegments: Integer, heightSegments: Integer,
  phiStart: Float, phiLength: Float,
  thetaStart: Float, thetaLength: Float)

radius=1: Float
球体の半径．
widthSegments=32: Integer
水平方向の分割数．最小値は 3．
heightSegments=16:
垂直方向の分割数．最小値は 2．
phiStart=0:
水平方向の開始角度．
phiLength=Math.PI * 2:
水平方向の終了角度．
thetaStart=0:
垂直方向の開始角度．
thetaLength=Math.Pi:
垂直方向の終了角度．

ジオメトリは、Y軸（水平掃引）とZ軸（垂直掃引）の周りを掃引して頂点を計算することによって作成される。したがって、これらの頂点の計算を開始（または終了）するポイントを定義するために、phiStart、phiLength、thetaStart、thetaLength の異なる値を使用して不完全な球体（「球体スライス」に似ている）を作成することができる。

マテリアルの作成

色やテクスチャを貼り付けできる．

光源を必要としないマテリアル
MeshBasicMaterial

金属ぽいの作れる
MeshPhysicalMaterial

ジオメトリとマテリアルを組み合わせる

以下の2工程でカメラで写す準備をする．
．

1．メッシュを作成

ジオメトリとマテリアルを組み合わせたものになる．

let sphere = new THREE.Mesh(geometry, material);

2．シーンに追加

scene.add(sphere);

レンダリング

render.render(scene, cmaera);

カメラの後ろに物体があるので，軸を動かす必要がある．

エラー

[Error] Origin null is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. (main.js, line 0)

ローカルサーバを起動してやる必要があるらしい．
vscodeなら，拡張機能Live Serverをインストールして，htmlファイルを右クリック > Open With Live Server [cmd L cmd O]