three.jsエディタ

Question

の中からコントロールを追加するにはどうすればよいですか？ご協力いただきありがとうございます。 私はかなり新しいコーディングをしており、three.jsからダウンロードできるサンプルを扱っています。私は非常に基本的なシーンを作成し、メッシュ/ライト、コントロールなどをロードすることができ、すべてがうまくいっています。

しかし、ブラウザエディタ（https://threejs.org/editor/）からシーンを公開しようとしていますが、カメラに軌道を追加する方法がわかりません。シーンを公開した後、.html、.json、およびいくつかのjavascriptファイルapp.js + three.min.jsが取得されます。誰かが私を助けたり、app.jsファイル内で軌道制御をどこに置くべきか、またはタブや何かがエディタにない場合は、適切な方向に私を向けることができますか？ブラウザエディタ内でスクリプトを追加する場所も素晴らしいでしょう！

ブラウザのエディタのhtmlが、私が使っている例のhtmlとは異なって設定されているように見えます。

Answer 1

編集： OrbitControls.jsを取得し、コードをコピーします。エディタを開き、シーンオブジェクトを選択します。新しいスクリプトを作成し、OrbitControlsコードをそれに追い越します。 OrbitControlsのような名前を付けます。

は、シーンオブジェクトに新しいスクリプトを作成し、それにこれを貼り付けます（このスクリプトはOrbitControls後に来ることを確認してください）動作するはず

var controls; 

controls = new THREE.OrbitControls(camera, renderer.domElement); 
controls.addEventListener('change', render); 
controls.enableZoom = false; 

function update(event) 
{ 
    controls.update(); 
} 

function render() { 
    renderer.render(scene, camera); 
} 

。少なくとも私のために働いた。それが役に立てば幸い！

EDIT： また、リポジトリからthree.jsをダウンロードできるし、それはエディタが含まれています。通常と同じように、自分のjsライブラリをhtmlで追加することができます。

Answer 2

私はシーンオブジェクトにスクリプトを作成し、そこから外部OrbitControlsをdinamicallyロードしました。

これは私が使用するコードです。

var orbitcontrols = document.createElement('script'); 
var controls = null; 
orbitcontrols.src = "https://threejs.org/examples/js/controls/OrbitControls.js"; 
orbitcontrols.onload = function() { 
    if (!controls && THREE.OrbitControls) controls = new THREE.OrbitControls (camera); 
}; 
document.head.appendChild(orbitcontrols); 

残念ながらエディタではかなりバグがあります（ズームインすることはできますが、回転はできません）。一度公開すると美しく動作します。 私は多くの調査をしなかったが、私はそれがエディタ自身のコントロールと矛盾していると思われる。