読者です 読者をやめる 読者になる 読者になる

tamlog

主にwebのフロント回り たまに登山

WebGLで3D処理をしてみる

スポンサーリンク

  1. three.jsを読み込む
  2. シーンを作成
  3. レンダラーを作成
  4. カメラを作成 => シーンに追加
  5. 光源を作成 => シーンに追加
  6. メッシュ(ジオメトリー、マテリアル)を作成 => シーンに追加
  7. レンダリング

1,three.jsを読み込む

https://github.com/mrdoob/three.js

  1. /build/three.min.js

2,シーンを作成

http://threejsdoc.appspot.com/doc/index.html#Scene

  1. var scene = new THREE.Scene();

3,レンダラーを作成

http://threejsdoc.appspot.com/doc/index.html#CanvasRenderer

  1. var renderer = new THREE.CanvasRenderer()
  2. renderer.setSize()
  3. document.body.appendChild(renderer.domElement)

4,カメラを作成

http://threejsdoc.appspot.com/doc/index.html#Camera

  1. var camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  2. camera.position.set()//カメラの位置
  3. camera.lookAt()//注視点
  4. scene.add( camera )
  • 透視投影 new THREE.PerspectiveCamera(画角, 縦横比, カメラから手前までの距離, カメラから奥までの距離)
  • 正投影 new THREE.OrthographicCamera(左座標, 右座標, 上座標, 下座標, カメラから手前までの距離, カメラから奥までの距離)
  • 複合カメラ new THREE.CombinedCamera()

5,光源を作成

http://threejsdoc.appspot.com/doc/index.html#Light

  1. var directionalLight = new THREE.DirectionalLight();
  2. directionalLight.position.set()
  3. directionalLight.lookAt()
  4. scene.add( directionalLight )
  • 平行光 new THREE.DirectionalLight(カラー, 光源の強さ[デフォルトは1]);
  • 環境光 new THREE.AmbientLight();
  • 点光源 new THREE.PointLightLight();
  • スポットライト new THREE.SpotLightLight();

6,メッシュを作成

http://threejsdoc.appspot.com/doc/index.html#SkinnedMesh

  1. var material = new THREE.MeshLambertMaterial()
  2. var geometry = new THREE.CubeGeometry()
  3. var mesh = new THREE.Mesh(geometry, material)
  4. scene.add( mesh )

マテリアルを作成

http://threejsdoc.appspot.com/doc/index.html#Material

ジオメトリーを作成

http://threejsdoc.appspot.com/doc/index.html#Geometry

  • 立方体を生成 new THREE.CubeGeometry(横のサイズ, 縦のサイズ, 高さ, 横のセグメント, 縦のセグメント, 高さのセグメント)
  • 球体を生成 new THREE.SphereGeometry(半径, 横のセグメント ,縦のセグメント)
  • 半球体を生成 new THREE.SphereGeometry(半径, 横のセグメント ,縦のセグメント, x方向の開始角度, x方向の終了角度, z方向の開始角度, z方向の終了角度)
  • トラースを生成 new THREE.TorusGeometry(半径, 管の太さ ,セグメント ,セグメント)
  • 平面を生成 new THREE.PlaneGeometry()
  • 円筒を生成 new THREE.CylinderGeometry()

7,レンダリング

http://threejsdoc.appspot.com/doc/index.html#CanvasRenderer

  1. renderer.render( scene, camera )