Threejs使ってみた
•Transferir como ODP, PDF•
2 gostaram•901 visualizações
three.jsを使ってみました。 TrackballControllsでマウスぐるぐるできるところまで。 #jscafe で発表する資料です。
Recomendados
Mais conteúdo relacionado
Semelhante a Threejs使ってみた
Semelhante a Threejs使ってみた (20)
Último
Último (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. おわり