フロントエンドエンジニアになりたい

デザイナーなのかコーダーなのかディレクターなのかよくわからない人のブログ。趣味で絵を描きました(過去形)

Three.jsの初歩

Three.jsの勉強を始めようと思います。

まずは初歩。立方体をつくって、それぞれの面に画像を貼り付けて、適当に回転してみました。 (リビジョンは79です)

https://yossiy.github.io/study_three/1.html

// シーンを作成
var scene = new THREE.Scene();
// カメラを作成
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
// レンダラーを作成
var renderer = new THREE.WebGLRenderer();
// レンダラーを画面の大きさにセット
renderer.setSize( window.innerWidth, window.innerHeight );
// レンダラーをdomへ挿入
document.body.appendChild( renderer.domElement );
// 横幅 1 高さ 1 深さ 1 の立方体(頂点の集合)を作成
var geometry = new THREE.CubeGeometry( 10, 10, 10);
// マテリアル(表面)を作成
var materials = [];
var texloader = new THREE.TextureLoader();
materials.push( new THREE.MeshPhongMaterial( { map: texloader.load('img/1.jpg') } ) );
materials.push( new THREE.MeshPhongMaterial( { map: texloader.load('img/2.jpg') } ) );
materials.push( new THREE.MeshPhongMaterial( { map: texloader.load('img/3.jpg') } ) );
materials.push( new THREE.MeshPhongMaterial( { map: texloader.load('img/4.jpg') } ) );
materials.push( new THREE.MeshPhongMaterial( { map: texloader.load('img/5.jpg') } ) );
materials.push( new THREE.MeshPhongMaterial( { map: texloader.load('img/6.jpg') } ) );
var material = new THREE.MeshFaceMaterial(materials);

// メッシュを作成
var cube = new THREE.Mesh( geometry, material );
// シーンにメッシュを追加
scene.add( cube );
// カメラの座標を手前へ 50 に設定(+で手前、-で前方)
camera.position.z = 50;
// ライトを作成
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 50, 50, 50 ).normalize();
scene.add(light);

// ライトを作成
var light2 = new THREE.DirectionalLight( 0x555555 );
light2.position.set( -50, -50, 50 ).normalize();
scene.add(light2);

// 動きの初期化
var angle = 0;
var xl = 20;
var zl = 20;
var yl = 20;
var radius = zl;

// アニメーション
var render = function () {
  requestAnimationFrame( render);

  // rotationで回転
  cube.rotation.x += 0.05;
  cube.rotation.y += 0.05;
  angle += 0.01;

  // 斜めに回転運動
  var cos = Math.cos(angle);
  var sin = Math.sin(angle);
  var x = xl + cos * radius;
  var y = yl + cos * radius;
  var z = zl + sin * radius;
  cube.position.x = x - xl;
  cube.position.y = y - yl;
  cube.position.z = z - zl;

  // レンダリング
  renderer.render(scene, camera);
}
render();