Forked from: cx20's [WebGL] ライブラリを使わずに glTF Tutorial のサンプルを読み込んでみるテスト View Diff (42)

Fork
0
Fav
0
View
152
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 271 lines
  • HTML 100 lines
  • CSS 11 lines
[WebGL] クォータニオンを使用して三角形を回転させてみるテスト

<対応した点>
・glTF アニメーションモデルではクォータニオンによる回転が必要となる為、その仕組みをテスト。
・クォータニオンによる回転は JavaScript の行列ライブラリである glMatrix.js を使用。
 <例>
 var q = quat.create();
 var v = vec3.create();
 q.set([0.0, 0.0, 0.707, 0.707]); // クォータニオンで 90 度回転を指定
 v.set([0.0, 0.0, -2.0]); // 平行移動行列で位置を指定
 mat4.fromRotationTranslation(mvMatrix, q, v);

<参考>
■ A Simple Animation
https://github.com/KhronosGroup/glTF-Tutorials/blob/master/gltfTutorial/gltfTutorial_006_SimpleAnimation.md

■ glMatrix
http://glmatrix.net/

■ [WebGL] 行列演算ライブラリを使用してみるテスト(glMatrix.js v2.x編)
http://jsdo.it/cx20/fCkX
  • [WebGL] クォータニオンを使用して三角形を回転させてみるテスト
  • [WebGL] クォータニオンを使用して三角形を回転させてみるテスト

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

cx20

Author

プログラマ(マイクロソフト系の言語を使用することが多いです。) JavaScript のライブラリを色々と試して遊んでます。

■ 各種 WebGL ライブラリによる基本サンプル一覧 http://qiita.com/cx20/items/0fa19c96aa6470d98807

■ 各種 WebGLライブラリと3D物理演算ライブラリの組み合わせ一覧 http://qiita.com/cx20/items/3ebed669fb9c9e797935

■ glTF 対応ライブラリのサンプル一覧 https://github.com/cx20/gltf-test

■ Grimoire.js サンプル一覧 http://jsdo.it/tag/Grimoire.js

■ GLBoost サンプル一覧 http://jsdo.it/tag/GLBoost

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags