板、球、三角を表示させるわ

前回の【初期設置】Three js でとりあえず何か表示したい。に引き続いてこんどは板と球と三角なのを出す。

板　: plane
球　: sphere
三角: shape

取りあえず板を出して見る。
前回作ったやつだとsceneがローカル変数？あんまよくわかんないけど、そこにいるので。
グローバル変数に変更

var scene = new THREE.Scene();

↑これだけ書かれてもわからないだろうけど。とりあえず一番外に出した。

後はそれぞれ作りたいモノをfunctionとして用意してみる。

板を出す

いたを出す

//板を出す
function ideyo_ita(){
  //1.ジオメトリを新しく作る→PlaneGeometry - 板作るよ
  var planeGeometry = new THREE.PlaneGeometry(10, 10);
  //2.メッシュを作ります → 赤っぽいのにした
  var planeMaterial = new THREE.MeshBasicMaterial({color: 0xeecccc});
  //3.さっき作った1と2をTHREE.Mesh()の引数に入れてnew
  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 始めの一歩 by ziyudom (@ziyudom) on CodePen.

addしたのに表示されなかった

作っててscene.addしたのに表示されなかったのなんでかなぁ。って思ったけど、原因はレンダラーにあった。

ideyo_ita();//こんな感じで↓より先に
renderer.render(scene, camera);

この子が走る前にscene.addしておかないと、この子は今のソースコードだと一回しか走らないので、描画されないのであった。

球を出す

https://threejs.org/docs/#Reference/Geometries/SphereGeometry

THREE.SphereGeometry

radius : 半径
widthSegments : 経度(縦)分割
heightSegments : 緯度(横)分割

↓こっから意味がわからない↓
phiStart : 開始位置、経度
phiLength : なんかぐいーって囲むヤツ横
thetaStart : 開始位置、経度
thetaLength : なんかぐいーって囲むヤツ縦

//球を出す
function ideyo_tama(){

  //1.ジオメトリを新しく作る→SphereGeometry - 球作るよ
  var geometry = new THREE.SphereGeometry( 5, 32, 32 );
  //2.メッシュを作ります → 黄色？っぽいのにした
  var material = new THREE.MeshBasicMaterial( {color: 0xffff55} );
  //3.さっき作った1と2をTHREE.Mesh()の引数に入れてnew
  var sphere = new THREE.Mesh( geometry, material );
  
  sphere.position.x = 10;
  sphere.position.y = 15;
  sphere.position.z = 19;
  scene.add(sphere);
}

球が出た

See the Pen 球を板を出す by ziyudom (@ziyudom) on CodePen.

三角を出す

//三角
function ideyo_sankaku(){
  var length = 20, width = 15;
  
  var shape = new THREE.Shape();
  
  shape.moveTo( 0,0 );//スタート
  shape.lineTo( 0, width );//次
  shape.lineTo( length, width );//次
  
  var geometry = new THREE.ShapeGeometry( shape );
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  var sankaku = new THREE.Mesh( geometry, material ) ;
  sankaku.position.x = 0;
  sankaku.position.y = 0;
  sankaku.position.z = -4;
  scene.add( sankaku );
}

三角でた

See the Pen 三角を球を板を出す by ziyudom (@ziyudom) on CodePen.