カンバスがフルスクリーンでないときにthree.js内のオブジェクトをクリックすると、r74

Question

私の質問にお答えしていただきありがとうございます。

バージョンr74の3つのJSでraycasterを使用する方法の良い例は実際には見つかりません。

誰もが私たちに行う方法の例を与えることができ

...バージョンR55とR76の間に多くの変更のようです...と多くのフォーラムは、3のマイナーバージョンの例を話して入れていますそれ？道による角度とブートストラップを使用して

イム

これは私が試したものです：

マイビュー

<div class="col-md-11"> 
    <div class="container"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h3 class="panel-title">Title</h3> 
     </div> 
     <div class="panel-body" style="padding: 0px"> 
     <div class="canvas-zonas" ng-click="zonas.click($event)"> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

私のCss（スタイラスを使用して）

.canvas-zonas 
    height 67vh 

マイコントローラー

var = mouse = new THREE.Vector3(); 
var = raycaster = new THREE.Raycaster(); 
var = canvas = document.querySelector(".canvas-zonas"); 

function clickObject(event) { 
     event.preventDefault(); 
     mouse.x= ((event.clientX - canvas.offsetLeft)/canvas.clientWidth) * 2 - 1; 
     mouse.y=-((event.clientY - canvas.offsetTop)/canvas.clientHeight) * 2 + 1; 
     mouse.z = 0.5; 
     raycaster.setFromCamera(mouse, camera); 
     var intersects = vm.raycaster.intersectObjects(scene.children); 
     console.info(intersects); 
    } 

だから、私は外をクリックした場合でも、時々私は、オブジェクトをクリックして、時々私は、[オブジェクト]を取得しても、[]空の配列を取得し、私のキャンバスをクリックして、Intersects変数を印刷するときオブジェクト。

私は君たち私のカメラの設定を少し示したいと思います：、

マイカメラ

var camera = new THREE.PerspectiveCamera(30, canvas.clientWidth/canvas.clientHeight, 0.10, 1000) 
camera.position.y = 20; 
camera.position.z = 50; 
camera.lookAt(scene.position); 
camera.updateProjectionMatrix(); 

も私のカメラの設定だ、と私はWebGLのを使用することを念頭に置いていレンダラまた

var renderer = new THREE.WebGLRenderer({antialias: true}); 

として、私は、resizeイベントが起こっ持っている心を持っている：

function listenResize() { 
    window.bind('resize', function() { 
    canvas = document.querySelector(".canvas-zonas"); 
    renderer.setSize(canvas.clientWidth, canvas.clientHeight); 
    camera.aspect = (canvas.clientWidth/canvas.clientHeight); 
    camera.updateProjectionMatrix(); 
    }); 
} 

そして最後に、私は何が起こっているの画像を投稿します：

画像1

画像2

は非常にありがとうございました私の最後の投稿を恐れています。私はそれを更新しました！

Answer 1

私はまったく同じ問題を抱えていました。"クリスRoofe" -

• Y座標：インターネットの周りに潜んで2日間を過ごした後、私は最終的に発見し、良い結果でこれをテストした：

  let canvasBounds = this.renderer.context.canvas.getBoundingClientRect(); 
  this.mouse.x = ((event.clientX - canvasBounds.left)/(canvasBounds.right - canvasBounds.left)) * 2 - 1; 
  this.mouse.y = - ((event.clientY - canvasBounds.top)/(canvasBounds.bottom - canvasBounds.top)) * 2 + 1; 
  

  出典：THREE.js Ray Intersect fails by adding div

  クレジット回答。

• X座標 - "beepscore"はKris Roofeの答えをコメントしました。

私はそれが私のような多くの人々に役立つことを願っています。