« ^ »three.jsを使う2023/1/7 更新約 4分 で読める # three.jsを使う --- ### three.jsとは WebGLを扱うためのJavaScriptのライブラリ --- ### 対象ブラウザ - どのブラウザでも動く訳じゃない - IEとかはWebGLは対応しない(ただしIEは終了した) --- ### サンプルを動かす https://github.com/mrdoob/three.js.git ダウンロード ``` git clone --depth=1 https://github.com/mrdoob/three.js.git ``` 依存パッケージのインストール ``` cd three.js npm install ``` 開発サーバーの起動 ``` npm start ``` Webブラウザで http://localhost:8080/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; ``` --- ### 初期化(2) シーン作成 ``` scene = new THREE.Scene(); ``` ライト作成 ``` var light = new THREE.DirectionalLight( 0xefefff, 2 ); light.position.set( 1, 1, 1 ).normalize(); scene.add(light); ``` (ライトの設定は見栄えにかなり影響する) --- ### 初期化(3) モデルデータのロード ``` 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); }); ``` --- ### 初期化(4) レンダラーの作成 ``` 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 ); ``` --- ## 自分で作った3Dモデルをthree.jsで動かす (モデリングもBlenderでやります) --- ### Blender - http://www.blender.org/ - 3DCG開発環境 - Blenderのインストールの説明は省略 --- まずはモデリング --- ## 猿 - BlenderのHello world的存在 - スザンヌという名前が付いている - add monkey --- Blenderを起動したら 真ん中の立方体を削除 fn+delete を押すとOK?と聞かれるので Deleteを選択してenter --- スザンヌを追加 spaceを押してモーダルを出して “add monkey”とtypeしenter --- #### 作成したデータをthree.js用に出力 --- 作成したデータをthree.js用に出力 --- - ./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 --- 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 ./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 ``` --- #### 作成したデータをthree.js用に出力 Blender用のpluginをBlenderのplugin用ディレクトリにコピー ``` cp ./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs Blender/blender.app/Contents/MacOS/2.68/scripts/addons/ ``` ``` cp ./utils/exporters/blender/2.65/scripts/addons/io_mesh_threejs $BLENDER_DIR -R ``` 注) BLENDER_DIRはBlenderのplugin用ディレクトリに置き換えてください --- #### 作成したデータをthree.js用に出力 1.「メニュー > File > User Preferences」を選択。 2. Addonsタブの ImportExportを選ぶ。 2. 右端のチェックをONにするとThree.js形式のデータの出力機能が有効になる。 エクスポートする。JSON形式で出力される。 --- エクスポートしたデータを 自分の作成したページに 表示させてみる --- マウスでグルグルしたい --- イベントハンドラ追加 ``` function rotate_object(event) { if ( mesh ) { mesh.rotation.x = event.clientX / 10; mesh.rotation.y = event.clientY / 10; } } ``` こんな処理の関数を document.addEventListener()で登録する --- ## 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楽しい - モデリングの技術結構重要 --- みんなやろうよ three.js --- 元データ - https://www.slideshare.net/TakesxiSximada/threejs-30716363 - https://www.slideshare.net/TakesxiSximada/threejs-30716344