Threejs使ってみた

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-- 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)$

解凍して
●

(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サーバ起動

●

Serving HTTP on 0.0.0.0 port 8000 ...

●

http://0.0.0.0:8000/examples/
にアクセスしてみる

横のメニューっぽいの選ぶと
なんかいろいろ出来ている

横のメニュー

サンプルのソースを読んでみる
●

examples/canvas_morphtargets_horse.html

●

馬みたいなやつ

サンプルソース内の関数とか
●

●

●

●

init()
初期化
onWondowResize()
ウィンドウが変更されたときの処理
animate()
描画開始関数
render()
１回のレンダリング時の処理

じゃあ1つずつみて行きます

初期化 ①
コンテナ要素作成
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;

初期化 ②
シーン作成
scene = new THREE.Scene();
ライト作成
var light = new THREE.DirectionalLight( 0xefefff, 2 );
light.position.set( 1, 1, 1 ).normalize();
scene.add(light);

ライトの設定とか
とても大切

初期化 ③
モデルデータのロード
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);
});

初期化 ④
レンダラーの作成
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setSize(window.innerWidth, window.innerHeight);
レンダラーのDOM要素を追加
container.appendChild(renderer.domElement);
ブラウザのサイズ変更時のハンドラ登録
window.addEventListener( 'resize', onWindowResize, false );

初期化でやらなきゃ行けない事
まとめ
●

カメラの作成と設定
–

●

シーンの作成
–

●

–
–

THREE.JSONLoade
THREE.MeshLambertMaterial
HREE.Mesh

レンダラーの作成
–

●

THREE.DirectionalLight

モデルデータの作成
–

●

THREE.Scene

ライトの作成
–

●

THREE.PerspectiveCamera

THREE.CanvasRenderer

必要なハンドラーの登録とかその他諸々
–

window.addEventListener

ウィンドウサイズ変更時の処理
アスペクト比を設定
camera.aspect = window.innerWidth / window.innerHeight;
射影matrixを更新 (たぶんどう映るかという内部情報を更新)
camera.updateProjectionMatrix();
レンダラーサイズを設定
renderer.setSize( window.innerWidth, window.innerHeight );

描画開始関数 animate()
フレームの描画更新の設定
requestAnimationFrame( animate );
render();

フレーム毎の描画処理 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);

フレーム毎の描画処理 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 );

なんかややこしい印象...

やっぱり自分で作ったデータを
動かしてみたい!!

でもモデリングはどうしよう

やります

今回は
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用に出力

●

(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)$

●

●

(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用ディレクトリに置き換えてください


メニューバーから File > User Preferences を選択


Addonsタブの ImportExportを選ぶ


右端のチェックをONにすると
Three.js形式のデータの出力機能が有効になる

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

●

"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

●

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

●

●

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

●

よくわからないので
見なかった事にしよう

よくわからないので
見なかった事にしよう
でもJSON形式っぽいことは
わかった

エクスポートしたデータを
自分の作成したページに
表示させてみる

マウスでグルグルしたい

イベントハンドラ追加
function rotate_object(event) {
if ( mesh ) {
mesh.rotation.x = event.clientX / 10;
mesh.rotation.y = event.clientY / 10;
}
}

こんな処理の関数を
document.addEventListener()で登録する

地面も欲しい

add planeで地面っぽいのを追加

地面ぽいのが追加された

なんかグルグルを
もっといい感じにしたい

なんかグルグルを
もっといい感じにしたい
TrackballControls を使ってみよう

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()は
もういらない

まとめ
●

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

●

Three.js/Blender楽しい

●

モデリングの技術結構重要

Threejs使ってみた

More Related Content

Similar to Threejs使ってみた (20)

Recently uploaded (20)

Threejs使ってみた