Klicken Sie auf Objekte in threw.js, wenn die Leinwand nicht Vollbild ist r74

Question

Vielen Dank für Ihre Zeit nehmen, um meine Frage zu beantworten.

Ich kann wirklich kein gutes Beispiel finden, wie man in drei JS in der Version r74 Raycaster verwendet.

es eine Menge Änderungen zwischen den Versionen R55 und R76 zu sein scheint ... und viele Foren sprechen und Beispiele für kleinere Versionen von drei Putting ..

kann uns jemand ein Beispiel geben, wie zu tun es?

Im Winkel und Bootstrap durch die Art und Weise unter Verwendung von

das ist, was ich habe try:

My View

<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> 

Mein Css (mit Stift)

.canvas-zonas 
    height 67vh 

My-Controller

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); 
    } 

Also, wenn ich meine canvass klicken und die Intersects Variable drucken, manchmal bekomme ich [] ein leeres Array selbst ein, wenn das Objekt klicken und manchmal bekomme ich [object] auch wenn ich außerhalb klicken das Objekt.

Ich möchte euch ein bisschen von meiner Kamera Config zeigen:

Meine Kamera

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(); 

Das ist meine Kamera Config ist, und auch, im Sinn haben, dass ich einen WebGL verwenden als Renderer

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

Außerdem haben Sie daran, dass ich ein Grßenänderungsereignis los haben:

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(); 
    }); 
} 

Und schließlich werde ich ein Bild posten, was los ist:

Bild 1

Bild 2

danke sehr viel und entschuldige meinen letzten Beitrag. Ich habe es aktualisiert !!!

Answer 1

Ich hatte genau das gleiche Problem wie Sie.Nach zwei Tagen um Internet lauern ich endlich gefunden und getestet dies mit guten Ergebnissen:

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; 

Quelle: THREE.js Ray Intersect fails by adding div

Credits:

• Y-Koordinate - "Kris Roofe" Antworten.
• X-Koordinate - "Beepscore", der die Antwort von Kris Roofe kommentierte.

Ich hoffe, es hilft vielen Leuten wie mir.