2017-01-14 3 views
1

Three.jsとHTMLスライダーを混在させることに問題があります。 スライダが表示されていますが、移動できません。ドラッグして値を変更しようとすると、nothings(カメラの動きのみ)が発生します。コンテナThree.jsThree.jsとhtmlスライダー

<div id="container"></div> 

スライダー:

<div id="zoom"><input id="setZoom" type="range" min="1" max="9000" step="1" value="100" data-orientation="vertical"></div> 
+0

:100 –

+0

試してみた – Filemon279

+0

jsfiddleでこの問題を繰り返すことはできますか? – prisoner849

答えて

5

あなたは、スライダーの位置を変更しようとしているときにカメラが動いていると言うように、私が想定してみろあなたはTHREE.OrbitControls()を使用しています。

このような状況の解決策は、2番目のパラメータとしてrenderer.domElementを追加することができるあなたは、コントロールのオブジェクトを作成するとき、等:

var controls = new THREE.OrbitControls(camera, renderer.domElement); 

jsfiddle

は、zインデックスを使用して、容器の上にスライダを移動
+0

ありがとう、それは完璧に働いた! – Filemon279

+0

ようこそ。他のユーザーが参照できるように、回答を受け入れてください。 – prisoner849