あれば、今より2週間をthreejsするドラゴンボートフェスティバルから学び、そして今私は、インターネット、比較的重い材料から収集し、プロジェクト内のピットの大きさをステップを要約すると、次のエラーは、私に知らせて偉大な神をありがとうございました。
まず、データthreejs学習
プロジェクトのピット要約の第二に、大きさ
1.の効果を達成するために：
2.難点
- 負荷OBJとMTLファイルを達成する方法
// インポートOBJ外部モデル 関数setObj（）{ // 負荷MTL ため（LET I = 0; I <objUrl.length; I ++ ）{ // 荷重表示進捗 VAR onProgress = 関数（XHR）{ IF （xhr.lengthComputable） { VARはpercentComplete = xhr.loaded / xhr.total×100; にconsole.log（恐らくMath.round（はpercentComplete、2）+ '％は、ダウンロード' ）; } }; // ロードエラーが呼び出され VARのonError = 関数（） {}; 新しい新しいTHREE.MTLLoader（） .setPath（'ソース/' ） .LOAD（mtlUrl [I] + 'MTL'、関数（材料）{ materials.preload（）; 新しいTHREE.OBJLoader（） .setMaterials（材料） .setPath（ 'ソース/' ） .LOAD （OBJURL [I] 'OBJ' +、関数（オブジェクト）{ // 设置模型的位置 object.position.x = 2 i *が+ 20 ; object.position.y = 2 。 object.position.z = 2 ; object.castShadow = trueに、 object.receiveShadow = trueに; // モデルがシーンに追加され （オブジェクト）scene.add; // objects.push（オブジェクト）; }、onProgress、のonError ）; }）; } }
- インポート3Dモデルの後にドラッグを達成する方法
機能ドラッグがTHREE.DragControlsですが、我々はそれがタイプグループであることを、外部モデルをインポートし、そしてdragControlsを探しているので、直接書き込みdragcontrolsテンプレートならば、あなたは見つけることができます、ドラッグタイプメッシュのタイプであるコール単にドラッグを実現することはできません。
// モデルは、ドラッグ実現する 機能をドラッグ（オブジェクト）{ // 初期化ドラッグ制御 するvar dragControls = 新新THREE.DragControls（オブジェクト、カメラ、renderer.domElementを）; dragControls.addEventListener（ 'hoveron'、機能（イベント）{ / / オブジェクトをさせ、選択された制御対象のバインディングを変換し 、transform.attach（event.object） ）}; // ドラッグ開始 dragControls.addEventListenerを（ 'はdragstart'、関数（）{ controls.enabled = falseに; ）}; / / ドラッグ終了 dragControls.addEventListener（ 'dragendイベント'、関数（）{ controls.enabled = 真; }）; }
あなたはドラッグの原則を実装threejsを見て、あなたがTHREE.Raycasterを使用する必要がありますしているこの時間は、マウスの世界座標に2次元座標に変換するために、マウスの2次元座標を取り込むために、カメラからの光線を照射するマウスの位置をクリックすることにより、 （二次元座標）と現在のカメラ行列は、ビームの位置を計算し、次いで、光線が交差オブジェクトの配列を取得し、距離に応じた要素のどのソート、近いより前方に、検査子孫を可能にするために、そして最終的にdragControlsをコールすることができます。
注意：あなたがページの最後に移動する場合も、裁判官はそれがここの場所のマウスクリックまたはタッチスクリーンのクリックを取得していることを、携帯端末やPC側では、現在のページに注意を払う必要がありますドラッグを実現：
// 携帯端末やパソコンで決定 するvar OS = 機能（）{ VAR UAは= navigator.userAgent、 isWindowsPhone = /（Windowsは？：電話番号）/ （UA）.TEST、 isSymbian = /（？：SymbianOS）/ .TEST（UA）|| isWindowsPhone、 isAndroid = /：/（アンドロイド？）（UA）.TEST、 isFireFox = /：/（Firefoxの？）（UA）.TEST、 isChrome = /（？：クローム| CriOS）/ .TEST（UA）、 isTablet = /(?:iPad|PlayBook)/.test(ua）||（isAndroid && /（：！？モバイル）。/テスト（UA））||（isFireFox && /（？：タブレット）/ .TEST（UA））、 isPhone = /(?:iPhone)/.test(ua）&&！isTablet、 ispCとは =！isPhone &&！&& isAndroid！isSymbian; リターン{ isTablet：isTablet、 isPhone：isPhone、 isAndroid：isAndroid、 ispCと：ispCと }。 }（）; ............ するvarマウス= 新しいTHREE.Vector2（）; もし（os.isAndroid || os.isPhone）{ // 移动端点击位置 するvarタッチ= event.touches [0 ]。 mouse.x =（touch.pageX / window.innerWidth）* 1 - 2 。 mouse.y = - （touch.pageY / window.innerHeight）* 2 + 1 ; } そう IF （os.isTablet）{ // 移動終了位置クリック するvarタッチevent.touches = [0 ]; mouse.x =（タッチ.pageX / window.innerWidth）* 2 - 1。; mouse.y = - （touch.pageY / window.innerHeight）* 2 + 1 ; } そう IF （os.isPc）{ // マウスクリック位置を算出するraycaster -1の範囲に画面の中心点に所望の点の位置は、1。 mouse.x =（event.clientX / window.innerWidth）* 1 - 2。; mouse.y= - （event.clientY / window.innerHeight）* 2 + 1 ; }
- 座標表示を変更する方法
需要は、我々が表示するために、3つのGUIを使用し、この場合には、回転または平行移動である座標表示を制御するために、ユーザが必要となります。すなわち：
INIT（）{ // 设置のGUI选项の VARの gui_tag = 新しい 関数（）{ この .translate = 真。 } VARの GUI = 新しいdat.GUI（）。 gui.add（gui_tag、 '翻訳' ）; ... } // 时刻渲染 関数アニメーション（）{ ...... 場合（gui_tag.translate === 真）{ transform.setMode（ "翻訳" ）。 } 他{ transform.setMode（ "回転" ）。 } }
- 回転やズームカメラを制御する方法
コントロールするカメラの回転orbitControlを使用し、あなたがカメラプラスモデルをドラッグすると、カメラが一緒に移動します見つける時間を、回転させたときに、モデルをドラッグするには、この時間はあまり好みになるだろうことは注目に値する、この私たちは、追加したいとき：
transform.addEventListener（ 'ドラッグ・変更'、関数（イベント）{ orbit.enabled =！event.value; }）;
完全なコードは次のとおりです。
関数のinit（）{ // 添加相机的旋转 軌道= 新しいTHREE.OrbitControls（カメラ、renderer.domElement）。 orbit.enableDamping = 真; orbit.update（）; transform.addEventListener（ 'ドラッグ・変更'、関数（イベント）{ orbit.enabled =！event.value; }）; orbit.addEventListener（ [変更] 、レンダリング）。 } ... 関数アニメーション（）{ ... orbit.update（）。 }
- マイクロチャネルアプレットの中に埋め込まれたページthreejsを表示する方法
マイクロチャネルアプレット上の固定ラベルフォーマットを持って、我々はthreejsモデルを参照するには、特定のページにジャンプするのWebViewを使用することができます。
3.残された課題
ディスプレイの種類について、通常のPCの終了ページで座標変換の側面を表示することができますが、その後は失敗します最後に移動。
4.注下の落とし穴は、
- index.htmlファイルは、以下のように与えられます、開くためにダブルクリックすることはできません。
解決法：あなたが開くようにwebstormを使用することができ、これは、HTTPた：localhostを要求します。
- タッチtouchstartインポートされたファイルにリスニングがあるであろう次のように、この時間が与えられます。
することができます。このとき、{偽受動}が続きます。
例えば：
scope.domElement.addEventListener（ 'touchstart'、onTouchStart、{受動：偽 }）。