three.js 使ってみた

@TakesxiSximada
自己紹介
@TakesxiSximada
普段は?: 主に警備(自宅を) / たまに外でも仕事
よく使う: Python, Pyramid, Emacs派
あんまり使わない: vim
お願い: まさかり投げないでー
(投げられてもskill的に...
今日はthree.js使ってみた
three.jsとは
●

WebGLを扱うためのJavaScriptのライブラリ
(要は3DCGっぽい事をウェブブラウザ上でやり
たいときに使うと便利)
でもでも
どのブラウザでも動く訳じゃない
●

IEとかはWebGLは対応しないらしい
(えー!!)
そんな小さい?ことは気にせずに
とりあえずサンプルを
動かす事にする
本家
●

http://mrdoob.github.io/three.js/

ここからDLできる
ダウンロードして
●

(common)$ wget http://github.com/mrdoob/three.js/zipball/master -O three.js.zip

●

--2014-01-30 22:28:47-- ht...
解凍して
●

(common)$ unzip three.js.zip > /dev/null

●

(common)$ ls

●

mrdoob-three.js-4862f5f three.js.zip

●

(common)$
アクセスしてみる
●

(common)$ cd mrdoob-three.js-4862f5f # 解凍したディレクトリ内に移動

●

(common)$ python -m SimpleHTTPServer # 簡易のwebサーバ起動

...
おお、何かでた
横のメニューっぽいの選ぶと
なんかいろいろ出来ている

横のメニュー
ではさっそく
サンプルのソースを読んでみる
●

examples/canvas_morphtargets_horse.html

●

馬みたいなやつ
サンプルソース内の関数とか
●

●

●

●

init()
初期化
onWondowResize()
ウィンドウが変更されたときの処理
animate()
描画開始関数
render()
1回のレンダリング時の処理
じゃあ1つずつみて行きます
初期化 ①
コンテナ要素作成
container = document.createElement( 'div' );
document.body.appendChild( container );

カメラ作成
aspect = window...
初期化 ②
シーン作成
scene = new THREE.Scene();
ライト作成
var light = new THREE.DirectionalLight( 0xefefff, 2 );
light.position.set( 1,...
初期化 ③
モデルデータのロード
var data_path = '/js/horse.js';
var loader = new THREE.JSONLoader(true);
loader.load(data_path, function(...
初期化 ④
レンダラーの作成
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setSize(window.innerWidth...
初期化でやらなきゃ行けない事
まとめ
●

カメラの作成と設定
–

●

シーンの作成
–

●

–
–

THREE.JSONLoade
THREE.MeshLambertMaterial
HREE.Mesh

レンダラーの作成
–

●...
ウィンドウサイズ変更時の処理
アスペクト比を設定
camera.aspect = window.innerWidth / window.innerHeight;
射影matrixを更新 (たぶんどう映るかという内部情報を更新)
camera.u...
描画開始関数 animate()
フレームの描画更新の設定
requestAnimationFrame( animate );
render();
フレーム毎の描画処理 render()①
カメラの位置と向きを変更
theta += 0.1;
camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
cam...
フレーム毎の描画処理 render()②
キーフレームの選択
if (mesh) {
var time = Date.now() % duration;
var keyframe = Math.floor( time / interpolati...
なんかややこしい印象...
やっぱり自分で作ったデータを
動かしてみたい!!
でもモデリングはどうしよう
でもモデリングはどうしよう
やります
でもモデリングはどうしよう
今回は
Blenderを使います
Blender
●

http://www.blender.org/

●

3DCG開発環境

●

オープンソースのフリーソフトウェア

●

すげえ
Blenderのインストールなど
●

Blenderのインストールの説明は省略

●

http://blender.jp/modules/xfsection/article.php?articleid=

●

ここなどを参考にやってみてく...
まずはモデリング
まずはモデリング

ただモデリングは
なかなか手間だし難しい
そういうときは?
とりあえずスザンヌさん
とりあえずスザンヌさん

猿
とりあえずスザンヌさん

BlenderのHello world的存在
Blenderを起動したら
真ん中の立方体を削除

fn+delete
を押すとOK?と聞かれるので
Deleteを選択してenter
スザンヌさんを追加
spaceを押してモーダルを出して
“add monkey”とtypeしenter
スザンヌさんを追加

ドン!!
作成したデータをthree.js用に出力
作成したデータをthree.js用に出力
●

(common)$ find | grep blender

●

./examples/obj/blenderscene

●

./examples/obj/blenderscene/scen...
作成したデータをthree.js用に出力
●

(common)$ cp ¥ ./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs¥
Blender/blender.app/...
作成したデータをthree.js用に出力

メニューバーから File > User Preferences を選択
作成したデータをthree.js用に出力

Addonsタブの ImportExportを選ぶ
作成したデータをthree.js用に出力

右端のチェックをONにすると
Three.js形式のデータの出力機能が有効になる
エクスポート!!
エクスポートされた中身をみてみる
{
●

●

"metadata" :

●

{

●

"formatVersion" : 3.1,

●

"generatedBy" : "Blender 2.65 Exporter",

●

"v...
エクスポートされた中身をみてみる
●

0.125,-0.226562,0.75,-0.125,-0.226562,0.75,0.0859375,-0.289062,0.742188,-0.0859375,-0.289062,0.742188,...
エクスポートされた中身をみてみる
●

188,-0.265625,-0.890625,0.242188,-0.265625,0.890625,0.234375,-0.320312,-0.890625,0.234375,-0.320312,0....
まだまだある...
よくわからないので
見なかった事にしよう
よくわからないので
見なかった事にしよう
でもJSON形式っぽいことは
わかった
エクスポートしたデータを
自分の作成したページに
表示させてみる
こわい
マウスでグルグルしたい
イベントハンドラ追加
function rotate_object(event) {
if ( mesh ) {
mesh.rotation.x = event.clientX / 10;
mesh.rotation.y = event.cli...
グルグル

出来た
地面も欲しい

add planeで地面っぽいのを追加
地面ぽいのが追加された
なんかグルグルを
もっといい感じにしたい
なんかグルグルを
もっといい感じにしたい
TrackballControls を使ってみよう
TrackballControllsを追加
examples/js/controls/TrackballContorolls.js
を読み込む必要有り

var trackball;
function init(){
〜省略〜
trackbal...
ぐるっとまわる
ズームイン!!
ズームアウト!!
TrackballControlls簡単
まとめ
●

3DCGっぽいと見た目に箔がつく

●

Three.js/Blender楽しい

●

モデリングの技術結構重要
みんなやろうよthree.js
おわり
Upcoming SlideShare
Loading in …5
×

Threejs使ってみた

808 views

Published on

three.jsを使ってみました。
TrackballControllsでマウスぐるぐるできるところまで。
#jscafe で発表する資料です。

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
808
On SlideShare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Threejs使ってみた

  1. 1. three.js 使ってみた @TakesxiSximada
  2. 2. 自己紹介 @TakesxiSximada 普段は?: 主に警備(自宅を) / たまに外でも仕事 よく使う: Python, Pyramid, Emacs派 あんまり使わない: vim お願い: まさかり投げないでー (投げられてもskill的に受けられません)
  3. 3. 今日はthree.js使ってみた
  4. 4. three.jsとは ● WebGLを扱うためのJavaScriptのライブラリ (要は3DCGっぽい事をウェブブラウザ上でやり たいときに使うと便利)
  5. 5. でもでも
  6. 6. どのブラウザでも動く訳じゃない ● IEとかはWebGLは対応しないらしい (えー!!)
  7. 7. そんな小さい?ことは気にせずに
  8. 8. とりあえずサンプルを 動かす事にする
  9. 9. 本家 ● http://mrdoob.github.io/three.js/ ここからDLできる
  10. 10. ダウンロードして ● (common)$ wget http://github.com/mrdoob/three.js/zipball/master -O three.js.zip ● --2014-01-30 22:28:47-- http://github.com/mrdoob/three.js/zipball/master ● Resolving github.com... 192.30.252.128 ● Connecting to github.com|192.30.252.128|:80... connected. ● HTTP request sent, awaiting response... 301 Moved Permanently ● Location: https://github.com/mrdoob/three.js/zipball/master [following] ● --2014-01-30 22:28:48-- https://github.com/mrdoob/three.js/zipball/master ● Connecting to github.com|192.30.252.128|:443... connected. ● HTTP request sent, awaiting response... 302 Found ● Location: https://codeload.github.com/mrdoob/three.js/legacy.zip/master [following] ● --2014-01-30 22:28:49-- https://codeload.github.com/mrdoob/three.js/legacy.zip/master ● Resolving codeload.github.com... 192.30.252.147 ● Connecting to codeload.github.com|192.30.252.147|:443... connected. ● HTTP request sent, awaiting response... 200 OK ● Length: 84432877 (81M) [application/zip] ● Saving to: ‘three.js.zip’ ● ● 100%[===========================================================================================================================================>] 84,432,877 1.71MB/s in 46s ● ● 2014-01-30 22:29:36 (1.74 MB/s) - ‘three.js.zip’ saved [84432877/84432877] ● ● (common)$
  11. 11. 解凍して ● (common)$ unzip three.js.zip > /dev/null ● (common)$ ls ● mrdoob-three.js-4862f5f three.js.zip ● (common)$
  12. 12. アクセスしてみる ● (common)$ cd mrdoob-three.js-4862f5f # 解凍したディレクトリ内に移動 ● (common)$ python -m SimpleHTTPServer # 簡易のwebサーバ起動 ● Serving HTTP on 0.0.0.0 port 8000 ... ● http://0.0.0.0:8000/examples/ にアクセスしてみる
  13. 13. おお、何かでた
  14. 14. 横のメニューっぽいの選ぶと なんかいろいろ出来ている 横のメニュー
  15. 15. ではさっそく
  16. 16. サンプルのソースを読んでみる ● examples/canvas_morphtargets_horse.html ● 馬みたいなやつ
  17. 17. サンプルソース内の関数とか ● ● ● ● init() 初期化 onWondowResize() ウィンドウが変更されたときの処理 animate() 描画開始関数 render() 1回のレンダリング時の処理
  18. 18. じゃあ1つずつみて行きます
  19. 19. 初期化 ① コンテナ要素作成 container = document.createElement( 'div' ); document.body.appendChild( container ); カメラ作成 aspect = window.innerWidth / window.innerHeight; camera = new THREE.PerspectiveCamera(50, aspect, 1, 10000); camera.position.y = 300; var point = new THREE.Vector3(0, 0, 0); camera.target = point;
  20. 20. 初期化 ② シーン作成 scene = new THREE.Scene(); ライト作成 var light = new THREE.DirectionalLight( 0xefefff, 2 ); light.position.set( 1, 1, 1 ).normalize(); scene.add(light); ライトの設定とか とても大切
  21. 21. 初期化 ③ モデルデータのロード var data_path = '/js/horse.js'; var loader = new THREE.JSONLoader(true); loader.load(data_path, function(geometry){ material = new THREE.MeshLambertMaterial( // 材質 {color: 0x606060, morphTargets: true, overdraw: 0.5 }); mesh = new THREE.Mesh(geometry, material); // メッシュ mesh.scale.set(1.5, 1.5, 1.5); scene.add(mesh); });
  22. 22. 初期化 ④ レンダラーの作成 renderer = new THREE.CanvasRenderer(); renderer.setClearColor(0xf0f0f0); renderer.setSize(window.innerWidth, window.innerHeight); レンダラーのDOM要素を追加 container.appendChild(renderer.domElement); ブラウザのサイズ変更時のハンドラ登録 window.addEventListener( 'resize', onWindowResize, false );
  23. 23. 初期化でやらなきゃ行けない事 まとめ ● カメラの作成と設定 – ● シーンの作成 – ● – – THREE.JSONLoade THREE.MeshLambertMaterial HREE.Mesh レンダラーの作成 – ● THREE.DirectionalLight モデルデータの作成 – ● THREE.Scene ライトの作成 – ● THREE.PerspectiveCamera THREE.CanvasRenderer 必要なハンドラーの登録とかその他諸々 – window.addEventListener
  24. 24. ウィンドウサイズ変更時の処理 アスペクト比を設定 camera.aspect = window.innerWidth / window.innerHeight; 射影matrixを更新 (たぶんどう映るかという内部情報を更新) camera.updateProjectionMatrix(); レンダラーサイズを設定 renderer.setSize( window.innerWidth, window.innerHeight );
  25. 25. 描画開始関数 animate() フレームの描画更新の設定 requestAnimationFrame( animate ); render();
  26. 26. フレーム毎の描画処理 render()① カメラの位置と向きを変更 theta += 0.1; camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) ); camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) ); camera.lookAt(camera.target);
  27. 27. フレーム毎の描画処理 render()② キーフレームの選択 if (mesh) { var time = Date.now() % duration; var keyframe = Math.floor( time / interpolation ); キーフレームが違っていたら有効なキーフレームを切り替える if ( keyframe != currentKeyframe ) { mesh.morphTargetInfluences[ lastKeyframe ] = 0; // 0にする事で無効になる mesh.morphTargetInfluences[ currentKeyframe ] = 1; // 1にする事で有効になる mesh.morphTargetInfluences[ keyframe ] = 0; lastKeyframe = currentKeyframe; currentKeyframe = keyframe; } mesh.morphTargetInfluences[ keyframe ] = ( time % interpolation ) / interpolation; mesh.morphTargetInfluences[ lastKeyframe ] = 1 - mesh.morphTargetInfluences[ keyframe ]; } renderer.render( scene, camera );
  28. 28. なんかややこしい印象...
  29. 29. やっぱり自分で作ったデータを 動かしてみたい!!
  30. 30. でもモデリングはどうしよう
  31. 31. でもモデリングはどうしよう やります
  32. 32. でもモデリングはどうしよう 今回は Blenderを使います
  33. 33. Blender ● http://www.blender.org/ ● 3DCG開発環境 ● オープンソースのフリーソフトウェア ● すげえ
  34. 34. Blenderのインストールなど ● Blenderのインストールの説明は省略 ● http://blender.jp/modules/xfsection/article.php?articleid= ● ここなどを参考にやってみてください (そんなに難しくない)
  35. 35. まずはモデリング
  36. 36. まずはモデリング ただモデリングは なかなか手間だし難しい
  37. 37. そういうときは?
  38. 38. とりあえずスザンヌさん
  39. 39. とりあえずスザンヌさん 猿
  40. 40. とりあえずスザンヌさん BlenderのHello world的存在
  41. 41. Blenderを起動したら 真ん中の立方体を削除 fn+delete を押すとOK?と聞かれるので Deleteを選択してenter
  42. 42. スザンヌさんを追加 spaceを押してモーダルを出して “add monkey”とtypeしenter
  43. 43. スザンヌさんを追加 ドン!!
  44. 44. 作成したデータをthree.js用に出力
  45. 45. 作成したデータをthree.js用に出力 ● (common)$ find | grep blender ● ./examples/obj/blenderscene ● ./examples/obj/blenderscene/scene.blend ● ./examples/obj/blenderscene/scene.Cube.js ● ./examples/obj/blenderscene/scene.js ● ./examples/obj/blenderscene/scene.Monkey.js ● ./examples/obj/blenderscene/scene.Plane.js ● ● ./examples/webgl_geometry_colors_blender.html ● ● ● Three.jsのソースツリーから Blender用のpluginを探します 以下のファイルがソレ ./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs ● ./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs/__init__.py ./examples/webgl_loader_json_blender.html ● ./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs/export_threejs.py ./examples/webgl_loader_scene_blender.html ● ./utils/exporters/blender./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs/import_threejs.py ● ./utils/exporters/blender/2.65 ● ./utils/exporters/blender/2.65/scripts ● ./utils/exporters/blender/2.65/scripts/addons ● ./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs ● ./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs/__init__.py ● ./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs/export_threejs.py ● ./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs/import_threejs.py ● ./utils/exporters/blender/README.md ● (common)$ ●
  46. 46. 作成したデータをthree.js用に出力 ● (common)$ cp ¥ ./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs¥ Blender/blender.app/Contents/MacOS/2.68/scripts/addons/ ● Blender用のpluginを Blenderのplugin用ディレクトリにコピー $ cp ./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs $BLENDER_DIR -R 注)BLENDER_DIRはBlenderのplugin用ディレクトリに置き換えてください
  47. 47. 作成したデータをthree.js用に出力 メニューバーから File > User Preferences を選択
  48. 48. 作成したデータをthree.js用に出力 Addonsタブの ImportExportを選ぶ
  49. 49. 作成したデータをthree.js用に出力 右端のチェックをONにすると Three.js形式のデータの出力機能が有効になる
  50. 50. エクスポート!!
  51. 51. エクスポートされた中身をみてみる { ● ● "metadata" : ● { ● "formatVersion" : 3.1, ● "generatedBy" : "Blender 2.65 Exporter", ● "vertices" : 507, ● "faces" : 500, ● "normals" ● "colors" : 0, ● "uvs" : [], ● "materials" ● "morphTargets" : 0, : 507, "bones" ● : 1, :0 }, ● ● "scale" : 1.000000, ● ● "materials" : [ { ● ● "DbgColor" : 15658734, ● "DbgIndex" : 0, ● "DbgName" : "default", "vertexColors" : false ● }], ● ● "vertices" : [0.4375,0.164062,0.765625,-0.4375,0.164062,0.765625,0.5,0.09375,0.6875,-0.5,0.09375,0.6875,0.546875,0.0546875,0.578125,-0.546875,0.0546875,0.578125,0.351562,-0.023 ● ● 4375,0.617188,-0.351562,-0.0234375,0.617188,0.351562,0.03125,0.71875,-0.351562,0.03125,0.71875,0.351562,0.132812,0.78125,-0.351562,0.132812,0.78125,0.273438,0.164062,0.796875,-0.27 ● 3438,0.164062,0.796875,0.203125,0.09375,0.742188,-0.203125,0.09375,0.742188,0.15625,0.0546875,0.648438,-0.15625,0.0546875,0.648438,0.078125,0.242188,0.65625,-0.078125,0.242188,0.65 ● 625,0.140625,0.242188,0.742188,-0.140625,0.242188,0.742188,0.242188,0.242188,0.796875,-0.242188,0.242188,0.796875,0.273438,0.328125,0.796875,-0.273438,0.328125,0.796875,0.203125,0. ● 390625,0.742188,-0.203125,0.390625,0.742188,0.15625,0.4375,0.648438,-0.15625,0.4375,0.648438,0.351562,0.515625,0.617188,-0.351562,0.515625,0.617188,0.351562,0.453125,0.71875,-0.351 ● 562,0.453125,0.71875,0.351562,0.359375,0.78125,-0.351562,0.359375,0.78125,0.4375,0.328125,0.765625,-0.4375,0.328125,0.765625,0.5,0.390625,0.6875,-0.5,0.390625,0.6875,0.546875,0.437 ● 5,0.578125,-0.546875,0.4375,0.578125,0.625,0.242188,0.5625,-0.625,0.242188,0.5625,0.5625,0.242188,0.671875,-0.5625,0.242188,0.671875,0.46875,0.242188,0.757812,-0.46875,0.242188,0.7 ● 57812,0.476562,0.242188,0.773438,-0.476562,0.242188,0.773438,0.445312,0.335938,0.78125,-0.445312,0.335938,0.78125,0.351562,0.375,0.804688,-0.351562,0.375,0.804688,0.265625,0.335938 ● ,0.820312,-0.265625,0.335938,0.820312,0.226562,0.242188,0.820312,-0.226562,0.242188,0.820312,0.265625,0.15625,0.820312,-0.265625,0.15625,0.820312,0.351562,0.242188,0.828125,-0.3515 ● 62,0.242188,0.828125,0.351562,0.117188,0.804688,-0.351562,0.117188,0.804688,0.445312,0.15625,0.78125,-0.445312,0.15625,0.78125,0,0.429688,0.742188,0,0.351562,0.820312,0,-0.679688,0 ● .734375,0,-0.320312,0.78125,0,-0.1875,0.796875,0,-0.773438,0.71875,0,0.40625,0.601562,0,0.570312,0.570312,0,0.898438,-0.546875,0,0.5625,-0.851562,0,0.0703125,-0.828125,0,-0.382812, ● -0.351562,0.203125,-0.1875,0.5625,-0.203125,-0.1875,0.5625,0.3125,-0.4375,0.570312,-0.3125,-0.4375,0.570312,0.351562,-0.695312,0.570312,-0.351562,-0.695312,0.570312,0.367188,-0.890 ● 625,0.53125,-0.367188,-0.890625,0.53125,0.328125,-0.945312,0.523438,-0.328125,-0.945312,0.523438,0.179688,-0.96875,0.554688,-0.179688,-0.96875,0.554688,0,-0.984375,0.578125,0.4375, ● -0.140625,0.53125,-0.4375,-0.140625,0.53125,0.632812,-0.0390625,0.539062,-0.632812,-0.0390625,0.539062,0.828125,0.148438,0.445312,-0.828125,0.148438,0.445312,0.859375,0.429688,0.59 ● 375,-0.859375,0.429688,0.59375,0.710938,0.484375,0.625,-0.710938,0.484375,0.625,0.492188,0.601562,0.6875,-0.492188,0.601562,0.6875,0.320312,0.757812,0.734375,-0.320312,0.757812,0.7 ● 34375,0.15625,0.71875,0.757812,-0.15625,0.71875,0.757812,0.0625,0.492188,0.75,-0.0625,0.492188,0.75,0.164062,0.414062,0.773438,-0.164062,0.414062,0.773438,0.125,0.304688,0.765625,- ● 0.125,0.304688,0.765625,0.203125,0.09375,0.742188,-0.203125,0.09375,0.742188,0.375,0.015625,0.703125,-0.375,0.015625,0.703125,0.492188,0.0625,0.671875,-0.492188,0.0625,0.671875,0.6 ● 25,0.1875,0.648438,-0.625,0.1875,0.648438,0.640625,0.296875,0.648438,-0.640625,0.296875,0.648438,0.601562,0.375,0.664062,-0.601562,0.375,0.664062,0.429688,0.4375,0.71875,-0.429688, ● 0.4375,0.71875,0.25,0.46875,0.757812,-0.25,0.46875,0.757812,0,-0.765625,0.734375,0.109375,-0.71875,0.734375,-0.109375,-0.71875,0.734375,0.117188,-0.835938,0.710938,-0.117188,-0.835 ● 93
  52. 52. エクスポートされた中身をみてみる ● 0.125,-0.226562,0.75,-0.125,-0.226562,0.75,0.0859375,-0.289062,0.742188,-0.0859375,-0.289062,0.742188,0.398438,-0.046875,0.671875,-0.398438,-0.046875,0.671875,0.617188,0.0546875,0. ● 625,-0.617188,0.0546875,0.625,0.726562,0.203125,0.601562,-0.726562,0.203125,0.601562,0.742188,0.375,0.65625,-0.742188,0.375,0.65625,0.6875,0.414062,0.726562,-0.6875,0.414062,0.7265 ● 62,0.4375,0.546875,0.796875,-0.4375,0.546875,0.796875,0.3125,0.640625,0.835938,-0.3125,0.640625,0.835938,0.203125,0.617188,0.851562,-0.203125,0.617188,0.851562,0.101562,0.429688,0. ● 84375,-0.101562,0.429688,0.84375,0.125,-0.101562,0.8125,-0.125,-0.101562,0.8125,0.210938,-0.445312,0.710938,-0.210938,-0.445312,0.710938,0.25,-0.703125,0.6875,-0.25,-0.703125,0.687 ● 5,0.265625,-0.820312,0.664062,-0.265625,-0.820312,0.664062,0.234375,-0.914062,0.632812,-0.234375,-0.914062,0.632812,0.164062,-0.929688,0.632812,-0.164062,-0.929688,0.632812,0,-0.94 ● 5312,0.640625,0,0.046875,0.726562,0,0.210938,0.765625,0.328125,0.476562,0.742188,-0.328125,0.476562,0.742188,0.164062,0.140625,0.75,-0.164062,0.140625,0.75,0.132812,0.210938,0.7578 ● 12,-0.132812,0.210938,0.757812,0.117188,-0.6875,0.734375,-0.117188,-0.6875,0.734375,0.078125,-0.445312,0.75,-0.078125,-0.445312,0.75,0,-0.445312,0.75,0,-0.328125,0.742188,0.09375,- ● 0.273438,0.78125,-0.09375,-0.273438,0.78125,0.132812,-0.226562,0.796875,-0.132812,-0.226562,0.796875,0.109375,-0.132812,0.78125,-0.109375,-0.132812,0.78125,0.0390625,-0.125,0.78125 ● ,-0.0390625,-0.125,0.78125,0,-0.203125,0.828125,0.046875,-0.148438,0.8125,-0.046875,-0.148438,0.8125,0.09375,-0.15625,0.8125,-0.09375,-0.15625,0.8125,0.109375,-0.226562,0.828125,-0 ● .109375,-0.226562,0.828125,0.078125,-0.25,0.804688,-0.078125,-0.25,0.804688,0,-0.289062,0.804688,0.257812,-0.3125,0.554688,-0.257812,-0.3125,0.554688,0.164062,-0.242188,0.710938,-0 ● .164062,-0.242188,0.710938,0.179688,-0.3125,0.710938,-0.179688,-0.3125,0.710938,0.234375,-0.25,0.554688,-0.234375,-0.25,0.554688,0,-0.875,0.6875,0.046875,-0.867188,0.6875,-0.046875 ● ,-0.867188,0.6875,0.09375,-0.820312,0.710938,-0.09375,-0.820312,0.710938,0.09375,-0.742188,0.726562,-0.09375,-0.742188,0.726562,0,-0.78125,0.65625,0.09375,-0.75,0.664062,-0.09375,- ● 0.75,0.664062,0.09375,-0.8125,0.640625,-0.09375,-0.8125,0.640625,0.046875,-0.851562,0.632812,-0.046875,-0.851562,0.632812,0,-0.859375,0.632812,0.171875,0.21875,0.78125,-0.171875,0. ● 21875,0.78125,0.1875,0.15625,0.773438,-0.1875,0.15625,0.773438,0.335938,0.429688,0.757812,-0.335938,0.429688,0.757812,0.273438,0.421875,0.773438,-0.273438,0.421875,0.773438,0.42187 ● 5,0.398438,0.773438,-0.421875,0.398438,0.773438,0.5625,0.351562,0.695312,-0.5625,0.351562,0.695312,0.585938,0.289062,0.6875,-0.585938,0.289062,0.6875,0.578125,0.195312,0.679688,-0. ● 578125,0.195312,0.679688,0.476562,0.101562,0.71875,-0.476562,0.101562,0.71875,0.375,0.0625,0.742188,-0.375,0.0625,0.742188,0.226562,0.109375,0.78125,-0.226562,0.109375,0.78125,0.17 ● 9688,0.296875,0.78125,-0.179688,0.296875,0.78125,0.210938,0.375,0.78125,-0.210938,0.375,0.78125,0.234375,0.359375,0.757812,-0.234375,0.359375,0.757812,0.195312,0.296875,0.757812,-0 ● .195312,0.296875,0.757812,0.242188,0.125,0.757812,-0.242188,0.125,0.757812,0.375,0.0859375,0.726562,-0.375,0.0859375,0.726562,0.460938,0.117188,0.703125,-0.460938,0.117188,0.703125 ● ,0.546875,0.210938,0.671875,-0.546875,0.210938,0.671875,0.554688,0.28125,0.671875,-0.554688,0.28125,0.671875,0.53125,0.335938,0.679688,-0.53125,0.335938,0.679688,0.414062,0.390625, ● 0.75,-0.414062,0.390625,0.75,0.28125,0.398438,0.765625,-0.28125,0.398438,0.765625,0.335938,0.40625,0.75,-0.335938,0.40625,0.75,0.203125,0.171875,0.75,-0.203125,0.171875,0.75,0.1953 ● 12,0.226562,0.75,-0.195312,0.226562,0.75,0.109375,0.460938,0.609375,-0.109375,0.460938,0.609375,0.195312,0.664062,0.617188,-0.195312,0.664062,0.617188,0.335938,0.6875,0.59375,-0.33 ● 5938,0.6875,0.59375,0.484375,0.554688,0.554688,-0.484375,0.554688,0.554688,0.679688,0.453125,0.492188,-0.679688,0.453125,0.492188,0.796875,0.40625,0.460938,-0.796875,0.40625,0.4609 ● 38,0.773438,0.164062,0.375,-0.773438,0.164062,0.375,0.601562,0,0.414062,-0.601562,0,0.414062,0.4375,-0.09375,0.46875,-0.4375,-0.09375,0.46875,0,0.898438,0.289062,0,0.984375,-0.0781 ● 25,0,-0.195312,-0.671875,0,-0.460938,0.1875,0,-0.976562,0.460938,0,-0.804688,0.34375,0,-0.570312,0.320312,0,-0.484375,0.28125,0.851562,0.234375,0.0546875,-0.851562,0.234375,0.05468 ● 75,0.859375,0.320312,-0.046875,-0.859375,0.320312,-0.046875,0.773438,0.265625,-0.4375,-0.773438,0.265625,-0.4375,0.460938,0.4375,-0.703125,-0.460938,0.4375,-0.703125,0.734375,-0.04 ● 6875,0.0703125,-0.734375,-0.046875,0.0703125,0.59375,-0.125,-0.164062,-0.59375,-0.125,-0.164062,0.640625,-0.0078125,-0.429688,-0.640625,-0.0078125,-0.429688,0.335938,0.0546875,-0.6 ● 64062,-0.335938,0.0546875,-0.664062,0.234375,-0.351562,0.40625,-0.234375,-0.351562,0.40625,0.179688,-0.414062,0.257812,-0.179688,-0.414062,0.257812,0.289062,-0.710938,0.382812,-0.2 ● 89062,-0.710938,0.382812,0.25,-0.5,0.390625,-0.25,-0.5,0.390625,0.328125,-0.914062,0.398438,-0.328125,-0.914062,0.398438,0.140625,-0.757812,0.367188,-0.140625,-0.757812,0.367188,0. ● 125,-0.539062,0.359375,-0.125,-0.539062,0.359375,0.164062,-0.945312,0.4375,-0.164062,-0.945312,0.4375,0.21875,-0.28125,0.429688,-0.21875,-0.28125,0.429688,0.210938,-0.226562,0.4687 ● 5,-0.210938,-0.226562,0.46875,0.203125,-0.171875,0.5,-0.203125,-0.171875,0.5,0.210938,-0.390625,0.164062,-0.210938,-0.390625,0.164062,0.296875,-0.3125,-0.265625,-0.296875,-0.3125,- ● 0.265625,0.34375,-0.148438,-0.539062,-0.34375,-0.148438,-0.539062,0.453125,0.867188,-0.382812,-0.453125,0.867188,-0.382812,0.453125,0.929688,-0.0703125,-0.453125,0.929688,-0.070312 ● 5,0.453125,0.851562,0.234375,-0.453125,0.851562,0.234375,0.460938,0.523438,0.429688,-0.460938,0.523438,0.429688,0.726562,0.40625,0.335938,-0.726562,0.40625,0.335938,0.632812,0.4531 ● 25,0.28125,-0.632812,0.453125,0.28125,0.640625,0.703125,0.0546875,-0.640625,0.703125,0.0546875,0.796875,0.5625,0.125,-0.796875,0.5625,0.125,0.796875,0.617188,-0.117188,-0.796875,0. ● 617188,-0.117188,0.640625,0.75,-0.195312,-0.640625,0.75,-0.195312,0.640625,0.679688,-0.445312,-0.640625,0.679688,-0.445312,0.796875,0.539062,-0.359375,-0.796875,0.539062,-0.359375, ● 0.617188,0.328125,-0.585938,-0.617188,0.328125,-0.585938,0.484375,0.0234375,-0.546875,-0.484375,0.0234375,-0.546875,0.820312,0.328125,-0.203125,-0.820312,0.328125,-0.203125,0.40625 ● ,-0.171875,0.148438,-0.40625,-0.171875,0.148438,0.429688,-0.195312,-0.210938,-0.429688,-0.195312,-0.210938,0.890625,0.40625,-0.234375,-0.890625,0.40625,-0.234375,0.773438,-0.140625 ● ,-0.125,-0.773438,-0.140625,-0.125,1.03906,-0.101562,-0.328125,-1.03906,-0.101562,-0.328125,1.28125,0.0546875,-0.429688,-1.28125,0.0546875,-0.429688,1.35156,0.320312,-0.421875,-1.3 ● 5156,0.320312,-0.421875,1.23438,0.507812,-0.421875,-1.23438,0.507812,-0.421875,1.02344,0.476562,-0.3125,-1.02344,0.476562,-0.3125,1.01562,0.414062,-0.289062,-1.01562,0.414062,-0.28 ● 9062,1.1875,0.4375,-0.390625,-1.1875,0.4375,-0.390625,1.26562,0.289062,-0.40625,-1.26562,0.289062,-0.40625,1.21094,0.078125,-0.40625,-1.21094,0.078125,-0.40625,1.03125,-0.0390625,- ● 0.304688,-1.03125,-0.0390625,-0.304688,0.828125,-0.0703125,-0.132812,-0.828125,-0.0703125,-0.132812,0.921875,0.359375,-0.21875,-0.921875,0.359375,-0.21875,0.945312,0.304688,-0.2890 ● 62,-0.945312,0.304688,-0.289062,0.882812,-0.0234375,-0.210938,-0.882812,-0.0234375,-0.210938,1.03906,0,-0.367188,-1.03906,0,-0.367188,1.1875,0.09375,-0.445312,-1.1875,0.09375,-0.44 ● 5312,1.23438,0.25,-0.445312,-1.23438,0.25,-0.445312,1.17188,0.359375,-0.4375,-1.17188,0.359375,-0.4375,1.02344,0.34375,-0.359375,-1.02344,0.34375,-0.359375,0.84375,0.289062,-0.2109 ● 38,-0.84375,0.289062,-0.210938,0.835938,0.171875,-0.273438,-0.835938,0.171875,-0.273438,0.757812,0.09375,-0.273438,-0.757812,0.09375,-0.273438,0.820312,0.0859375,-0.273438,-0.82031 ● 2,0.0859375,-0.273438,0.84375,0.015625,-0.273438,-0.84375,0.015625,-0.273438,0.8125,-0.015625,-0.273438,-0.8125,-0.015625,-0.273438,0.726562,0,-0.0703125,-0.726562,0,-0.0703125,0.7 ●
  53. 53. エクスポートされた中身をみてみる ● 188,-0.265625,-0.890625,0.242188,-0.265625,0.890625,0.234375,-0.320312,-0.890625,0.234375,-0.320312,0.8125,-0.015625,-0.320312,-0.8125,-0.015625,-0.320312,0.851562,0.015625,-0.3203 ● 12,-0.851562,0.015625,-0.320312,0.828125,0.078125,-0.320312,-0.828125,0.078125,-0.320312,0.765625,0.09375,-0.320312,-0.765625,0.09375,-0.320312,0.84375,0.171875,-0.320312,-0.84375, ● 0.171875,-0.320312,1.03906,0.328125,-0.414062,-1.03906,0.328125,-0.414062,1.1875,0.34375,-0.484375,-1.1875,0.34375,-0.484375,1.25781,0.242188,-0.492188,-1.25781,0.242188,-0.492188, ● 1.21094,0.0859375,-0.484375,-1.21094,0.0859375,-0.484375,1.04688,0,-0.421875,-1.04688,0,-0.421875,0.882812,-0.015625,-0.265625,-0.882812,-0.015625,-0.265625,0.953125,0.289062,-0.34 ● 375,-0.953125,0.289062,-0.34375,0.890625,0.109375,-0.328125,-0.890625,0.109375,-0.328125,0.9375,0.0625,-0.335938,-0.9375,0.0625,-0.335938,1,0.125,-0.367188,-1,0.125,-0.367188,0.960 ● 938,0.171875,-0.351562,-0.960938,0.171875,-0.351562,1.01562,0.234375,-0.375,-1.01562,0.234375,-0.375,1.05469,0.1875,-0.382812,-1.05469,0.1875,-0.382812,1.10938,0.210938,-0.390625,- ● 1.10938,0.210938,-0.390625,1.08594,0.273438,-0.390625,-1.08594,0.273438,-0.390625,1.02344,0.4375,-0.484375,-1.02344,0.4375,-0.484375,1.25,0.46875,-0.546875,-1.25,0.46875,-0.546875, ● 1.36719,0.296875,-0.5,-1.36719,0.296875,-0.5,1.3125,0.0546875,-0.53125,-1.3125,0.0546875,-0.53125,1.03906,-0.0859375,-0.492188,-1.03906,-0.0859375,-0.492188,0.789062,-0.125,-0.3281 ● 25,-0.789062,-0.125,-0.328125,0.859375,0.382812,-0.382812,-0.859375,0.382812,-0.382812], ● ● "morphTargets" : [], ● ● "normals" : [0.977691,-0.011017,0.209723,0.727683,-0.6545,0.205084,0.604022,-0.510239,0.612171,0.802057,-0.003388,0.597186,-0.604022,-0.510239,0.612171,-0.727683,-0.6545,0.2050 ● 84,-0.977691,-0.011017,0.209723,-0.802057,-0.003388,0.597186,0.682943,-0.547472,0.483535,0.868404,-0.003265,0.495773,-0.682943,-0.547472,0.483535,-0.868404,-0.003265,0.495773,0.098 ● 209,-0.750969,0.652974,0.115879,-0.86697,0.484664,-0.115879,-0.86697,0.484664,-0.098209,-0.750969,0.652974,0.037507,-0.965056,0.259224,-0.037507,-0.965056,0.259224,-0.655354,-0.692 ● 801,0.300821,-0.451369,-0.539323,0.710868,0.451369,-0.539323,0.710868,0.655354,-0.692801,0.300821,-0.551225,-0.635792,0.540208,0.551225,-0.635792,0.540208,-0.693991,-0.00351,0.7199 ● 32,-0.814783,-0.003784,0.579699,0.814783,-0.003784,0.579699,0.693991,-0.00351,0.719932,-0.946043,-0.012848,0.323679,0.946043,-0.012848,0.323679,-0.66216,0.691397,0.288919,-0.455123 ● ,0.525071,0.719108,0.455123,0.525071,0.719108,0.66216,0.691397,0.288919,-0.529771,0.626576,0.571581,0.529771,0.626576,0.571581,0.101871,0.740135,0.664663,0.12241,0.837306,0.532823, ● -0.12241,0.837306,0.532823,-0.101871,0.740135,0.664663,0.032075,0.971007,0.236854,-0.032075,0.971007,0.236854,0.732047,0.65273,0.194922,0.608448,0.494919,0.620289,-0.608448,0.49491 ● 9,0.620289,-0.732047,0.65273,0.194922,0.672201,0.538133,0.508438,-0.672201,0.538133,0.508438,0.721976,0.649861,0.237434,0.973724,-0.012207,0.227271,-0.721976,0.649861,0.237434,-0.9 ● 73724,-0.012207,0.227271,0.037446,0.933561,0.356395,-0.037446,0.933561,0.356395,-0.626331,0.647023,0.434767,0.626331,0.647023,0.434767,-0.911252,-0.012268,0.411603,0.911252,-0.0122 ● 68,0.411603,-0.618122,-0.653768,0.436415,0.618122,-0.653768,0.436415,0.036927,-0.935087,0.352397,-0.036927,-0.935087,0.352397,0.715049,-0.65688,0.239051,-0.715049,-0.65688,0.239051 ● ,0.183599,-0.00531,0.982971,-0.183599,-0.00531,0.982971,0.157628,-0.974487,0.159581,0.167852,-0.753471,0.635639,0,-0.792169,0.610248,0,-0.977722,0.209815,-0.167852,-0.753471,0.6356 ● 39,-0.157628,-0.974487,0.159581,0.654103,-0.741752,0.147984,0.362987,-0.618397,0.696951,-0.362987,-0.618397,0.696951,-0.654103,-0.741752,0.147984,0.969573,-0.147282,0.195379,0.5558 ● 95,-0.215979,0.802667,-0.555895,-0.215979,0.802667,-0.969573,-0.147282,0.195379,0.975768,0.094852,0.197028,0.567827,-0.03296,0.822443,-0.567827,-0.03296,0.822443,-0.975768,0.094852 ● ,0.197028,0.965117,0.21894,0.143498,0.587207,0.111942,0.80163,-0.587207,0.111942,0.80163,-0.965117,0.21894,0.143498,0.905301,-0.389111,0.170263,0.360546,-0.931608,0.045442,0.380871 ● ,-0.517563,0.766167,0.066317,-0.192907,0.978942,-0.380871,-0.517563,0.766167,-0.360546,-0.931608,0.045442,-0.905301,-0.389111,0.170263,-0.066317,-0.192907,0.978942,0.588885,-0.7907 ● 96,0.166784,0.498733,-0.401135,0.768303,-0.498733,-0.401135,0.768303,-0.588885,-0.790796,0.166784,0.912625,-0.402722,-0.069796,0.548906,-0.326579,0.769402,-0.548906,-0.326579,0.769 ● 402,-0.912625,-0.402722,-0.069796,0.880123,0.423841,0.213782,0.487533,-0.147038,0.860591,-0.487533,-0.147038,0.860591,-0.880123,0.423841,0.213782,0.509964,0.833003,0.214393,0.34168 ● 5,-0.032533,0.939238,-0.341685,-0.032533,0.939238,-0.509964,0.833003,0.214393,0.597766,0.783776,0.16831,0.314127,-0.030366,0.948882,-0.314127,-0.030366,0.948882,-0.597766,0.783776, ● 0.16831,0.228278,0.9588,0.16892,0.271126,0.213019,0.938658,-0.271126,0.213019,0.938658,-0.228278,0.9588,0.16892,-0.598682,0.777337,0.192999,-0.164251,0.159032,0.973479,0.164251,0.1 ● 59032,0.973479,0.598682,0.777337,0.192999,-0.791742,0.582873,0.182562,-0.072939,-0.028687,0.996918,0.072939,-0.028687,0.996918,0.791742,0.582873,0.182562,0,0.959532,0.281564,0,-0.0 ● 24079,0.999695,0.265389,-0.203955,0.942289,0.26603,-0.125706,0.955718,-0.26603,-0.125706,0.955718,-0.265389,-0.203955,0.942289,0.133427,-0.097476,0.986236,-0.133427,-0.097476,0.986 ● 236,0.197821,-0.010437,0.980163,-0.197821,-0.010437,0.980163,0.24134,-0.306711,0.920682,-0.24134,-0.306711,0.920682,0.362957,-0.212256,0.907285,-0.362957,-0.212256,0.907285,0.44145 ● ,-0.205847,0.873318,-0.44145,-0.205847,0.873318,0.419446,-0.379742,0.824519,-0.419446,-0.379742,0.824519,0.310617,-0.340342,0.887478,-0.310617,-0.340342,0.887478,-0.134922,-0.21457 ● 6,0.967315,0.134922,-0.214576,0.967315,-0.310404,-0.169744,0.935301,0,0.013459,0.999908,0.310404,-0.169744,0.935301,0.028382,-0.198553,0.979644,-0.028382,-0.198553,0.979644,0,-0.22 ● 3457,0.9747,-0.162389,-0.199744,0.966277,0.162389,-0.199744,0.966277,-0.025208,-0.411786,0.910916,0,-0.331248,0.94351,0.025208,-0.411786,0.910916,0.089053,-0.322886,0.942228,-0.089 ● 053,-0.322886,0.942228,0.155889,-0.170629,0.9729,-0.155889,-0.170629,0.9729,0.138615,0.002899,0.990326,0.180242,-0.057833,0.981903,-0.180242,-0.057833,0.981903,-0.138615,0.002899,0 ● .990326,0.496872,-0.435591,0.750542,0,-0.457564,0.889157,0,-0.004089,0.999969,-0.496872,-0.435591,0.750542,0,-0.034211,0.99939,0,-0.425733,0.904843,0.721549,-0.364605,0.588549,0.92 ● 4589,-0.212928,0.315867,0.580309,-0.730644,0.359661,-0.580309,-0.730644,0.359661,-0.924589,-0.212928,0.315867,-0.721549,-0.364605,0.588549,0.252785,0.347942,0.902768,0.621784,0.774 ● 407,0.116764,-0.621784,0.774407,0.116764,-0.252785,0.347942,0.902768,0,0.569231,0.822138,-0.301798,0.941618,0.149174,0.301798,0.941618,0.149174,0,0.759239,0.650777,0,0.785089,0.619 ● 343,0,-0.857418,0.514573,0.220557,-0.563952,0.79577,0,-0.52855,0.848872,-0.220557,-0.563952,0.79577,0,0.113559,0.9935,-0.199164,0.601733,0.773431,0.199164,0.601733,0.773431,0.36637 ● 5,0.475143,0.799982,-0.366375,0.475143,0.799982,0.42964,-0.184942,0.883816,-0.42964,-0.184942,0.883816,0.743034,0.029542,0.668569,-0.743034,0.029542,0.668569,0.646382,0.14243,0.749 ● 565,-0.646382,0.14243,0.749565,0.938505,0.325083,0.116031,-0.938505,0.325083,0.116031,0.953429,0.281594,0.107883,-0.953429,0.281594,0.107883,0,-0.903104,0.429395,-0.114017,-0.61507 ●
  54. 54. まだまだある...
  55. 55. よくわからないので 見なかった事にしよう
  56. 56. よくわからないので 見なかった事にしよう でもJSON形式っぽいことは わかった
  57. 57. エクスポートしたデータを 自分の作成したページに 表示させてみる
  58. 58. こわい
  59. 59. マウスでグルグルしたい
  60. 60. イベントハンドラ追加 function rotate_object(event) { if ( mesh ) { mesh.rotation.x = event.clientX / 10; mesh.rotation.y = event.clientY / 10; } } こんな処理の関数を document.addEventListener()で登録する
  61. 61. グルグル 出来た
  62. 62. 地面も欲しい add planeで地面っぽいのを追加
  63. 63. 地面ぽいのが追加された
  64. 64. なんかグルグルを もっといい感じにしたい
  65. 65. なんかグルグルを もっといい感じにしたい TrackballControls を使ってみよう
  66. 66. TrackballControllsを追加 examples/js/controls/TrackballContorolls.js を読み込む必要有り var trackball; function init(){ 〜省略〜 trackball = new THREE.TrackballControls(camera, renderer.domElement); 〜省略〜 } 〜省略〜 function render() { trackball.update(); renderer.render(scene, camera); } rotate_object()は もういらない
  67. 67. ぐるっとまわる
  68. 68. ズームイン!!
  69. 69. ズームアウト!!
  70. 70. TrackballControlls簡単
  71. 71. まとめ ● 3DCGっぽいと見た目に箔がつく ● Three.js/Blender楽しい ● モデリングの技術結構重要
  72. 72. みんなやろうよthree.js
  73. 73. おわり

×