Threejsでなんか表示したいのに、そもそも画面真っ白じゃない。
ってなるからメモ。

カメラを設置

カメラが我々の目になってくれるから設置しないと見えない、つまり画面に表示されないよ。

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 500);
camera.position.x = 30;
camera.position.y = 40;
camera.position.z = 10;
camera.lookAt(scene.position);

これあえてpositionずらしてるのは、今はAxisHelperしか置かないから。
AxisHelperは0,0,0にいるので、少し離れないとcameraも同じ位置にいるから、位置が被って見えない。
lookAtで向けたいオブジェクトに設定も出来る。自分で数字いれてもよいんだって。

THREE.PerspectiveCamera ( fov, aspect, near, far )
fov 画角
aspect 基本的に【横/縦】
near 手前をどこから表示させるか。これは0.1が主らしい。
far どこまで奥を描画させるか。
[参照] ここ凄くわかりやすい

レンダラーを設置

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xeeffff));
renderer.setSize(window.innerWidth, window.innerHeight);

ヘルパー追加

座標軸を追加してくれる。

var axes = new THREE.AxisHelper(20);
scene.add(axes);

plane 板を入れてみる

なにか球とか板とか、なんか突っ込むときはMeshを作ってsceneなどに突っ込むらしい。
MeshはGeometryとMaterialでできてる。
下記のPlaneGeometryで板のジオメトリ、MeshBasicMaterialで何のテクスチャ(今回色だけど)を設定。
二つをTHREE.Meshの引数に突っ込んでnewする。
ということなんだ。
ふーん。

var planeGeometry = new THREE.PlaneGeometry(30, 30);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0x00ee00});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);

plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;

scene.add(plane);

さて出来たのがこれ。
座標が出ただけでも感動する。
なぜなら意味がまったくわからないから。
先は長い。

See the Pen mOKvgQ by ziyudom (@ziyudom) on CodePen.