Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
12
Help us understand the problem. What is going on with this article?
@odorumaharaja

Three.jsでWebGL(1)

More than 5 years have passed since last update.

WebGLを使うにはThree.jsが良いと聞いたのでいじってみる

ダウンロード

three.jsの'download'からzipファイル一式を解凍

まずは
- build/three.min.js ... three.jsメイン
- examples/js/libs/tween.min.js ... アニメーション用
- examples/js/controls/TrackballControls.js ... マウスコントロール用
をいじってみる。three.jsの初期化方法はthree.js webglあたりで検索すると出てくるサンプルがたくさん出てくるので省略

サンプル

sample01.png

  • マウスで視点変更
  • 起動時にランダムの場所から開始点に画像が移動
  • 画像とマウスの衝突判定
  • 判定後に画像拡大

が200行くらいのスクリプトでできました。すごいねthree.js

以下、ちょっとハマった部分

マウスで視点変更

‘TrackControls.js‘のTHREE.TrackballControlsを起動する

controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 0.5;
controls.minDistance = 500;
controls.maxDistance = 6000;
controls.noRotate = false; //trueで回転操作を不可にする
controls.addEventListener('change', render);

画像の読み込み

ImageUtils.loadTextureで画像を読み込んでTHREE.MeshBasicMaterialでマテリアル化してTHREE.PlaneGeometryで平面を作成してTHREE.Meshで画像を平面に貼り付ける

var texture = new THREE.ImageUtils.loadTexture('sample.png');
var material = new THREE.MeshBasicMaterial({ map: texture });
material.side = THREE.DoubleSide; // 裏も見えるようにする
var geometry = new THREE.PlaneGeometry(300, 300);
object = new THREE.Mesh(geometry, material);

起動時に中心にアニメーション

‘tween.js‘を使う。beforeとafterの位置や視点を用いて以下のように書くだけ。本当に楽チンです

// beforeの座標
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
// afterの座標
target = new THREE.Object3D();
target.position.x = 0;
target.position.y = 0;
target.position.z = 0;
// 変換
new TWEEN.Tween(object.position)
.to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();

画像とマウスの衝突判定

参考:http://www.yomotsu.net/wp/?p=600
衝突判定はテンプレートがある模様

// var objectsにobjectの配列が入る
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
// ... intersects[0]に衝突した先頭のobjectが入る
}

判定後に画面拡大

上記衝突判定後にtween.jsの機能を利用した以下のような関数を用意する

// obj:選択されたオブジェクト, e:マウスin時にtrue,mouseout時にfalse
function selectObject(obj, e) {
if (obj) {
if (e === true) {
// サイズを大きくする
new TWEEN.Tween(interesectedObject.scale)
.to({ x: 1.4, y: 1.4, z: 1.4 }, 60)
.start();
} else {
// サイズを元に戻す
new TWEEN.Tween(interesectedObject.scale)
.to({ x: 1, y: 1, z: 1 }, 60)
.start();
}
}
}

12
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
12
Help us understand the problem. What is going on with this article?