Threejs使ってみた
•Download as ODP, PDF•
2 likes•904 views
The document discusses using the three.js library to load and render 3D models in a web browser. It goes through downloading three.js, loading a sample horse model, explaining the initialization, rendering and animation functions. It then covers using Blender to create a simple monkey model, exporting it to the JSON format used by three.js, and viewing the exported data structure.
More Related Content
Similar to Threejs使ってみた
Similar to Threejs使ってみた (20)
Recently uploaded
Recently uploaded (20)
Threejs使ってみた
- 2. 自己紹介 @TakesxiSximada 普段は?: 主に警備(自宅を) / たまに外でも仕事 よく使う: Python, Pyramid, Emacs派 あんまり使わない: vim お願い: まさかり投げないでー (投げられてもskill的に受けられません)
- 5. でもでも
- 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. 解凍して ● (common)$ unzip three.js.zip > /dev/null ● (common)$ ls ● mrdoob-three.js-4862f5f three.js.zip ● (common)$
- 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. おお、何かでた
- 15. ではさっそく
- 18. じゃあ1つずつみて行きます
- 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. 初期化 ② シーン作成 scene = new THREE.Scene(); ライト作成 var light = new THREE.DirectionalLight( 0xefefff, 2 ); light.position.set( 1, 1, 1 ).normalize(); scene.add(light); ライトの設定とか とても大切
- 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. 初期化 ④ レンダラーの作成 renderer = new THREE.CanvasRenderer(); renderer.setClearColor(0xf0f0f0); renderer.setSize(window.innerWidth, window.innerHeight); レンダラーのDOM要素を追加 container.appendChild(renderer.domElement); ブラウザのサイズ変更時のハンドラ登録 window.addEventListener( 'resize', onWindowResize, false );
- 24. ウィンドウサイズ変更時の処理 アスペクト比を設定 camera.aspect = window.innerWidth / window.innerHeight; 射影matrixを更新 (たぶんどう映るかという内部情報を更新) camera.updateProjectionMatrix(); レンダラーサイズを設定 renderer.setSize( window.innerWidth, window.innerHeight );
- 25. 描画開始関数 animate() フレームの描画更新の設定 requestAnimationFrame( animate ); render();
- 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. フレーム毎の描画処理 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. なんかややこしい印象...
- 30. でもモデリングはどうしよう
- 35. まずはモデリング
- 37. そういうときは?
- 38. とりあえずスザンヌさん
- 39. とりあえずスザンヌさん 猿
- 43. スザンヌさんを追加 ドン!!
- 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. 作成したデータを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. 作成したデータをthree.js用に出力 メニューバーから File > User Preferences を選択
- 50. エクスポート!!
- 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
- 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. まだまだある...
- 58. こわい
- 59. マウスでグルグルしたい
- 60. イベントハンドラ追加 function rotate_object(event) { if ( mesh ) { mesh.rotation.x = event.clientX / 10; mesh.rotation.y = event.clientY / 10; } } こんな処理の関数を document.addEventListener()で登録する
- 61. グルグル 出来た
- 63. 地面ぽいのが追加された
- 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. ぐるっとまわる
- 68. ズームイン!!
- 69. ズームアウト!!
- 72. みんなやろうよthree.js
- 73. おわり